一般在移动端的情况下，如果数据不是很多，页脚会跟随在内容的下方，但是这样很难看，之所以叫页脚就是想不管内容是不是足够的情况下，页脚始终显示在页面的最低端，如过不够那就显示在手机的最低端，这样的效果才是最佳的，但是我们如何使用css实现他呢？下面我们来说一下。

HTML代码结构为：

<div class="app">
	<div class="header">
		
	</div>
	<div class="body">
                
	</div>
	<div class="footer">
		
	</div>
</div>

1.首先要把html,body的高度设置为100%

html,body{
	height:100%;
}

2.设置容器的样式

.app{
	min-height:100%;
	position: relative;
	/*使用盒子模型*/
	box-sizing: border-box;
	/*padding-bottom的距离是footer的总高度，避免内容超过footer,被footer覆盖*/
	padding-bottom: 200px;
}

3.设置底部的样式

.footer{
	height:200px;
	width:100%;
	background: #000;
	position: absolute;
	left:0;
	bottom: 0;
}

完整CSS代码为：

*{
    padding:0;
    margin:0;     
}
html,body{
	height:100%;
}
.app{
	min-height:100%;
	position: relative;
	/*使用盒子模型*/
	box-sizing: border-box;
	/*padding-bottom的距离是footer的总高度，避免内容超过footer,被footer覆盖*/
	padding-bottom: 200px;
}
.footer{
	height:200px;
	width:100%;
	background: #000;
	position: absolute;
	left:0;
	bottom: 0;
}

这就完美的解决啦！不管你的高度为多高footer始终显示在页面的最低端;

如果帮助到你啦！就留下个脚印把...