当页面内容过少时，页脚会跟随内容，不会紧贴在页面底部。如图：
使用CSS计算属性calc为内容部分设置一个基于视口的最小高度。让页脚紧贴底部。
//视口高度减去页脚的高度
main{
min-height: calc(100vh - 101px);
}
上述方法必须要页脚高度已知，使用flex布局可以完美解决问题
<div class="con">
<div class="a">
<p>内容文字</p>
<p>内容文字</p>
<p>内容文字</p>
<p>内容文字</p>
<p>内容文字</p>
</div>
<footer>
<p>底部内容</p>
</footer>
</div>
// 容器区块使用弹性布局，
.con{
display: flex;
// 弹性布局内容元素为竖向排列
flex-flow: column;
// 容器区块最小高度为整个可视区域
min-height: 100vh;
}
// 内容区块高度自动伸展充满可用空间
.a{
flex: 1;
}
网友评论