將頁腳推送到頁面底部

Question

網站結構如下所示 - 有一個公共單元（內容），其中包含網站的所有元素和第二個單元，一個頁腳將被壓向網站的底部。

內容塊爲position: absolute用於對齊中心（水平） - 當屏幕左右均勻分開時減少屏幕。問題在於，對於這樣的塊結構，頁腳不會停留在頁面的底部。下面的代碼：

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.a_wrapper { 
 
    width: 600px; 
 
    left: 50%; 
 
    margin-left: -300px; 
 
    position: absolute; 
 
    border: 1px dotted #000000; 
 
} 
 

 
.a { 
 
    height: 800px; 
 
} 
 

 
.b { 
 
    width: 90%; 
 
    height: 50px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    margin: auto; 
 
    position: absolute; 
 
    border: 1px solid #000000; 
 
}

<div class = "a_wrapper"> 
 
    <div class = "a"></div> 
 
</div> 
 
<div class = "b"> 
 
</div>

https://jsfiddle.net/0k979ud5/

Answer 1

有兩件事情引起這一點 - 因爲只使用絕對定位的元素，這需要他們出公文流轉中，body元素本身具有沒有高度。因此，需要將其設置爲與內容相同。然後根據最近的定位元素來定位頁腳，這也是因爲position: absolute。它的直接父項爲body，它沒有定位，所以它將默認爲window對象。爲了解決這個問題，body應給予position: relative：

body { 
 
    height: 800px; 
 
    position: relative; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
.a_wrapper { 
 
    width: 600px; 
 
    left: 50%; 
 
    margin-left: -300px; 
 
    position: absolute; 
 
    border: 1px dotted #000000; 
 
} 
 

 
.a { 
 
    height: 800px; 
 
} 
 

 
.b { 
 
    width: 90%; 
 
    height: 50px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    margin: auto; 
 
    position: absolute; 
 
    border: 1px solid #000000; 
 
}

<div class="a_wrapper"> 
 
    <div class="a"></div> 
 
</div> 
 
<div class="b"></div>

這頁腳應低於的內容，body必須是850個像素高，當然...