无论页面上的内容是多少，我都试图将页脚推到页面的底部。我的大部分页面都没问题，但内容较少的页面在页面中部有一个浮动的页脚。即使我有
html,body{height:100%}
内容部分在以下情况下不增加高度
#content{height:100%}
设置好了。我搞砸了
clear:both
overflow:hidden
#content:after{}
无济于事。
<html>
<body>
<header>
<h1>Header Name</h1>
</header>
<section id="content">
<p>Temp Text</p>
</section>
<section id="footer">
<footer>
<p>All rights reserved</p>
</footer>
</section>
</body>
</html>
编辑：使用视口高度（vh）单位让我扩展了内容部分的高度，但是受上面的标头影响。因此，如果我的视口是900像素且标头为200像素，则我的页脚会被推到视口下方200像素处。
的CSS
#content{
min-height: 100vh;
}
这是工作中的演示
view-height无论内容大小如何，这将始终提供最小的全高
编辑（如果内容很小，则使页脚可见而不滚动）
body{
min-height: 100vh;
display: flex;
flex-direction: column;
}
#content{
flex: 1;
}<section id="content">
<p>Temp Text</p>
</section>
<section id="footer">
<footer>
<p>All rights reserved</p>
</footer>
</section>这是编辑的演示
如果内容很小，则页脚将位于视口的底部。如果内容大于屏幕高度，则页脚将下降
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句