footer位置的自动适配

footer位置的自动适配

遇到问题

页面主要内容不足以铺满一个屏幕的高度，footer下面就会有白块剩余。

我们希望实现的效果是，在主要内容不足以铺满整个屏幕的情况下，footer居于屏幕低部显示，使得整个页面占满屏幕。而当主要内容高度大于整个屏幕高度的时候，footer跟随主要内容进行显示。

方法如下

HTML结构：

主要页面

底部

设置CSS

html,body{
height: 100%;
margin: 0;
padding: 0;
}
/需将主区域内容（不包括footer）设置为此class，一般为div/
.page{
box-sizing: border-box;/为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制/
min-height: 100%;
padding-bottom: 25px;
}
footer{
height: 25px;
margin-top: -25px;
opacity: 0.5;
color: #5E5E5E;
}
/footer 结束/

需要注意的就是page的padding-bottom、footer的height、margin-top三个值要相对应。
参考资料：https://blog.csdn.net/u012076852/article/details/53068082