当使用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%); 
}