我无法将页脚固定在底部。我遵循经典的包装理念，使用一个空的 div 将页脚推到底部。这是我的代码:
HTML
<html>
<body>
<section class="wrapper">
<!--main content-->
<div class="push"></div>
</section>
<footer class="footer">
<div class="container">
<!--footer content-->
</div>
</footer>
</body>
</html>
CSS
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -13em;
}
.push {
height: 13em;
clear: both;
}
.footer{
padding: 20px 0;
width: 100%;
clear: both;
}
我使用 13em 作为高度和边距尺寸，因为这是中型和大型屏幕的尺寸。 此代码有效，但当布局必须适应超小和小尺寸时，问题就开始了。事实上，当屏幕变小时，页脚的高度会增加。
所以我的问题是:如何为 .push div 和包装器的边距设置动态高度？我希望这些值等于页脚高度。
我也尝试了一些 javascript 但没有成功。
附言请不要告诉我为页脚设置静态高度(例如 13em)，因为正如我所说，我想要一个自适应高度。
更新
最佳答案
您在 html 中缺少一个重要部分，正文内容，没有内容。我添加了一个带高度的div，看看
<body>
<section class="wrapper">
<!--main content-->
<div class="push"></div>
</section>
<div style="height:100%;min-height:100%;"></div>
<footer class="footer">
<div class="container">
<!--footer content-->
</div>
</footer>
</body>
现在它可以如您所愿地工作了。这是 fiddle
https://jsfiddle.net/wgrLfxg3/12/
看一下我将高度和最小高度设置为 100% 的 div。现在将您的内容放入此 div 中，它将正常工作。
关于javascript - 页脚通过自适应布局固定在底部(Bootstrap)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28868060/