第三十四章、紧贴底部的页脚

当页面内容过少时，页脚会跟随内容，不会紧贴在页面底部。如图：

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