當使用CSS動態改變頁面高度時，將頁腳保留在頁面的底部

Question

這裏有很多主題，給出了將頁腳保留在頁面底部的解決方案。但是，我正在努力讓它工作。

問題是頁面可以動態改變它的高度。

使用the current solution I'm using，頁腳位於頁面的底部。但是，當頁面高度動態變化時，頁腳仍處於其確切位置。

頁腳的CSS是如下：

#footer { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

的html和body標籤具有以下規則：

html, body { 
    min-height: 100%; 
    height: 100%; 
} 

見片斷下面的視覺演示（最好用於全窗口模式）

$(document).ready(function() { 
 
    
 
    var button = $("#addContent"); 
 
    var lorem = "<p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p><p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p><p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p><p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p>"; 
 
    
 
    button.click(function() { 
 
    
 
    $("main button").before(lorem); 
 
    
 
    }); 
 
    
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
header { 
 
    background: #333; 
 
    color: #fff; 
 
    padding: 25px; 
 
} 
 

 
main { 
 
    padding: 25px; 
 
} 
 

 
main h3 { 
 
    margin-top: 0; 
 
} 
 

 
code { 
 
    background: #f1f1f1; 
 
    padding: 0 5px; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
    background: #ededed; 
 
    padding: 25px; 
 
    color: #000; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<header> 
 
    <p>Just a sample header</p> 
 
</header> 
 

 
<main> 
 
    <h3>Some sample content</h3> 
 
    <p>Click on the <code>button</code> to see what i mean.</p> 
 
    <p>When the <code>heigth</code> of the page dynamically changes, the <code>footer</code> will stay at its exact position.</p> 
 
    <button id="addContent">Click to add more content</button> 
 
</main> 
 

 
<footer> 
 
    <p>The footer</p> 
 
</footer>

我怎樣才能讓CSS知道高度變化？並保留該頁腳底部的文檔而不是它停留在底部的窗口？

Answer 1

首先，如果你想使用position: absolute，那麼父應該是其他的那個初始位置，比如position: relative，否則它會看起來第一個父元素的位置是相對的。因此，如果將position: relative添加到body，頁腳將是動態的。

但絕對定位的元素完全從文檔流中去除，所以在這種情況下，將其他元素重疊，但如果我們在結尾處添加transform: translateY(100%)

這樣你纔會有我們可以解決：

body { 
    margin: 0; 
    position: relative; 
} 

footer { 
    position: absolute; 
    background: #ededed; 
    padding: 25px; 
    color: #000; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    transform: translateY(100%); 
}