使用flex布局，我们可以在实现自然高度的页眉和页脚的同时实现这一目标。页眉和页脚都将分别贴在视口的顶部和底部（非常类似于本机移动应用程序），并且主要内容区域将填充剩余的空间，而任何垂直溢出都将在该区域内滚动。
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}
602392714
清零编程群