版权声明： https://blog.csdn.net/xiasohuai/article/details/83823719
这里用的是flex
#app{
display: flex;
flex-direction: column;
}中间部门写 flex:1; 所以，底部和顶部会被撑开，且固定。（这里的中间部分我用的是h5新标签，当然可以用div来写）。
注：这里面的px应当用rem转换，这里我并没有写，没有介绍。写手机端的时候，是一定要转换的。这里主要讲的是，头部和底部固定。
全部代码如下：
<!DOCTYPE html>
<html>
<head>
<title>flex</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0
}
html, body, #app, #home {
height: 100%;
width: 100%;
font-family: "microsoft yahei", 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body, html {
font-size: 31.25vw;
background-color: #eee;
}
#app{
display: flex;
flex-direction: column;
}
header{
height: 120px;
background-color: blue;
font-size: 42px;
text-align: center;
line-height: 120px;
}
article{
display: flex;
flex: 1;
overflow-y: auto;
}
article>div{
flex: 1
}
article>div p{
font-size: 64px
}
footer{
display: flex;
height: 160px;
background-color: green;
font-size: 42px;
align-items: center;
}
footer>p{
flex: 1;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<header>头部</header>
<article>
<div>
<p>第一行</p>
<p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
<p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
<p>最后一行</p>
</div>
</article>
<footer><p>底部导航</p></footer>
</div>
</body>
</html>