1. 背景介绍
当我们创建一个网页时，常常会遇到内容不够长的情况，如果直接使用静态布局，就会出现页面底部留白的情况，这显然不是一种好的用户体验。解决这个问题的方法之一就是使用CSS实现页面底部自动贴底。
2. 实现方法
想要实现页面底部自动贴底，我们需要：
- 让页面内容区域的高度铺满整个视口，即高度为100%；
- 将页脚（footer）绝对定位在页面底部。
2.1 页面内容区域高度为100%
我们可以设置以下CSS属性来实现内容区域高度铺满整个视口：
html, body {
height: 100%; /* 将HTML和body元素的高度都设为100% */
}
.content {
min-height: 100%; /* 让内容区域的最小高度为100% */
}
这样就可以让内容区域的高度铺满整个视口。
2.2 页脚绝对定位在页面底部
为了让页脚绝对定位在页面底部，我们可以设置以下CSS属性：
.footer {
position: absolute; /* 将页脚绝对定位 */
bottom: 0; /* 将页脚定位在页面底部 */
}
这样就可以让页脚始终贴着页面底部。
3. 实例展示
我们来看一个实例。下面的代码展示了如何使用CSS实现内容高度不够的时候底部自动贴底的效果：
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
margin-bottom: -50px; /* 为了避免页脚挡住内容，需要留出页脚的高度 */
}
.footer {
height: 50px; /* 设置页脚的高度 */
position: absolute;
bottom: 0;
width: 100%; /* 让页脚宽度铺满整个页面 */
background-color: 333;
color: fff;
text-align: center;
line-height: 50px; /* 让页脚文字垂直居中 */
}
我们还需要在HTML中添加以下代码：
<div class="content">
<!-- 页面内容 -->
</div>
<div class="footer">
页脚
</div>
这样就可以实现底部自动贴底的效果了。
4. 总结
CSS可以很方便地实现页面底部自动贴底的效果。我们需要将内容区域的高度设为100%，页脚绝对定位在页面底部。通过这种方法，可以让网页的页面不会出现留白的情况，提高用户体验。