CSS固定頁腳寬度與填充

作爲一個業餘CSS編碼器，試圖擺脫「表」綜合徵，我有一些問題獲得固定頁腳正常工作。CSS固定頁腳寬度與填充

我有我的頁腳DIV設置爲100％寬度，但由於DIV內部有30像素填充，所以如果您知道我的意思，則頁腳延伸60個像素超過100％。

我該如何解決這個問題？

我的CSS是這樣的：

#footerDiv { 
background:url(../images/background/mainBG.gif); 
margin:0 auto; 
padding:15px 30px; 
width:100%; 
bottom:0; 
left:0; 
z-index:4; 
position:fixed 
}

來源

2011-12-05 TheCarver

你可以發佈你的代碼？ –

編輯，謝謝... – TheCarver

通常'''＃footer'''或'''.footer''在語義上更加正確。還有[HTML5頁腳元素]（http://dev.w3.org/html5/spec-author-view/the-footer-element.html），但我不會再爭辯這幾年; - ） – FakeRainBrigand

這聽起來像一個盒子模型的問題。欲瞭解更多信息look here。

的代碼，使其正確看起來像這樣，

.footer { 
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
     -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
     box-sizing: border-box;   /* Opera/IE 8+ */ 
}

因爲它使我更有意義，我有時它應用到網頁上的所有元素（即替代.footer與*）。

來源

2011-12-05 01:05:29 FakeRainBrigand

謝謝，這對未來知道很有用。我沒有用你的答案來修復我的代碼，但你確實給了我一個簡單的修復思路。我在頁腳DIV內有另一個DIV，用於保存我的內容。我拿走了包裝的填充物，而是在內部DIV中添加了一個邊距。這意味着100％是真實的。無論如何，謝謝:) – TheCarver

好主意，很高興我能激勵你！ – FakeRainBrigand

當您使用CSS設置元素的寬度時，它僅設置DIV的內容區域。填充和邊框寬度是在內容區域之外計算的。但是，您可以在您的頁腳DIV中放置另一個DIV，並將其填充爲30px，以保留外部DIV的100％寬度。

<DIV style="width:100%"> 
    <DIV style="padding:30px"> 
     <!-- Actual footer content --> 
    </DIV> 
</DIV>

這應該是CSS2.0兼容的。 ;）

來源

2011-12-05 01:12:04

哦，我在寫這個之前做了一些非常相似的事情。我添加了像你提到的內部DIV，但左右添加了30px的邊距。這意味着我的外部DIV是100％真實的。謝謝 – TheCarver

CSS固定頁腳寬度與填充

回答

相關問題