CSS浮動頁腳邊距

我試圖修改一個棘手的頁腳（http://www.cssstickyfooter.com/）表現出保證金...很容易對左右寬度爲：90％和保證金：汽車CSS浮動頁腳邊距

| | | | 
| | | | 
| | | | 
| | | |

但如何獲得高度的90％（或表現出某種頂部&下邊距）不會弄亂浮動頁腳

| ____ | 
| | | | 
| |____| | 
|  |

感謝

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input, 
textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 
} 
#header { 
    height: 33px; 
    line-height: 33px; 
    text-align: center; 
    background-color: green; 
} 
html { height: 100%; } 
body { height: 100%; width: 90%; margin: auto; } 
#wrap { min-height: 100%; background-color:gray; } 
#main { 
    overflow: auto; 
    padding-bottom: 33px; /* must be same height as the footer */ 
    background-color: red; 
    height: 100%; 
} 
#footer { 
    position: relative; 
    margin-top: -33px; /* negative value of footer height */ 
    height: 33px; 
    line-height: 33px; 
    text-align: center; 
    background-color:blue; 
}

http://jsfiddle.net/56REF/

來源

2010-08-08 Rakka Rage

html {height：90％;利潤率：5％;利潤率下限：5％; }不起作用！？頂部是罰款，但底部延伸錯了 – 2010-08-08 18:52:07

http://jsfiddle.net/F9HBc/爲什麼這麼難以垂直集中_stretching_ div？它處理horozontal調整大小罰款（無論我是愚蠢的，給定...或css是） – 2010-08-09 14:32:20

http://www.jsfiddle.net/CrdEy/基於http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm 仍然無法正常工作 – 2010-08-09 14:32:59

這會滿足您的需求嗎？ http://jsfiddle.net/CZayc/

來源

2010-08-09 14:38:15

多數民衆贊成在...非常感謝。它在使用圓角時使用邊框作爲填充時會遇到一些問題（http://jsfiddle.net/Lce3m/）是否無法使用邊框或主體的填充來推送HTML或頁眉邊距或填充以推送對身體？我試圖將白色邊框移動到正文，但不工作...（http://jsfiddle.net/CZayc/4/）感謝您的幫助 – 2010-08-09 19:10:01

嗯，我用邊界消除了第一個元素頂部的邊距問題。你可以很容易地使用保證金，沒有問題。你可以嘗試添加一個額外的元素來像這樣移動標題：http://jsfiddle.net/4gKhr/ – 2010-08-10 06:38:37

CSS浮動頁腳邊距

回答

相關問題