最简单的办法就是：flex
核心点是：中间部分 ｀flex：１｀，底部和顶部会被撑开，且固定。
完整代码：
<!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>
