CSS相對定位和填充

經過幾個小時的工夫，我設法找到了解決問題的方法，所以問題不在於「如何」，而在於「爲什麼它像這樣工作」。這裏是我的精簡例如：CSS相對定位和填充

<div id="header"> 
    <div id="header-element">header</div> 
</div> 
<div id="footer">footer</div>

CSS：

#header { 
    width: 100%; 
    position: relative; 
    padding-bottom: 5%; 
} 
#header-element { 
    position:absolute; 
    bottom: 0; 
} 
#footer { 
    position: relative; 
    margin-top: 5%; 
}

和的jsfiddle - http://jsfiddle.net/H7jwm/3/。

我的問題是如何使用百分比定位那些相對定位的元素，第一個是文檔頂部的一個％，第二個是第一個。我已經通過padding-bottom達到了第一個，而margin-top達到了第二個，但我已經通過暴力解決了解決方案 - 試用每個遠程邏輯解決方案。現在，如果刪除填充，則第二個元素的margin-top將成爲該元素和文檔頂部之間的邊界，而不是第一個元素，並且該第一個元素將「剩餘」空間放在頂部。

問題是爲什麼填充的工作原理是這樣的？或者，爲了更改它，填充如何與相對定位一起工作？

來源

2012-05-29 Zemljoradnik

我不明白什麼是你設法避免的其他情況。也許另一個小提琴？ – FelipeAls

我設法避免不能在文檔頂部放置'＃header'一些％，並且'＃header'放一些％的'＃footer'。 – Zemljoradnik

其實，你是混合立場。您的#header高度爲零。沒錯，零沒有，因爲它沒有相對的內容。 #header-element是絕對定位的，因爲#header的高度爲0，它恰好在填充底部空間中。

所以，如果您從#header刪除填充底部，#footer向上移動，從文檔的頂部開始。由於頁邊空白，文檔頂部邊框和「頁腳」這個詞之間有一些空格。

但你仍然有絕對定位#header-element，現在將在該邊緣頂部空間。

來源

2012-05-29 13:42:44 Paul

是的，我知道'＃header'的高度爲零，但我不明白'padding-bottom'百分比是如何計算的。它是從文檔的高度計算出來的（它看起來不是這樣），而填充本身就成了'＃頭文件的高度？ – Zemljoradnik

用於填充的百分比值應始終引用父塊元素。 – Paul

感謝您的回答。我也這麼想，並用不同的比例進行測試，但結果表明情況並非如此（或者我搞砸了很多）。如果我沒有弄錯，'body'是一個塊元素，並且在我的原始項目中'＃header'是'body'的一級子元素。 – Zemljoradnik

CSS相對定位和填充

回答

相關問題