footer位置的自动适配【始终显示在屏幕最低部】-（主内容不足一屏时显示在最底部，超出一屏时跟随主内容显示）

https://blog.csdn.net/fanpeizhong/article/details/80588460

在项目中常常会遇到这样的问题：页面主要内容不足以铺满一个屏幕的高度，footer下面就会有白块剩余。如下图：

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

 

而当主内容超过一屏时，自动跟随显示：

 

方法如下。设置CSS：

 

/*在主要内容不足以铺满整个屏幕的情况下，footer居于屏幕低部显示，
使得整个页面占满屏幕。而当主要内容高度大于整个屏幕高度的时候，
footer跟随主要内容进行显示；*/
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 结束*/

HTML结构：

<div class="page">  
    主要页面  
</div>  
<footer>底部</footer> 

需要注意的就是page的padding-bottom、footer的height、margin-top三个值要相对应。