纯 CSS 解决方案 1 - Flexbox：
display: flex;您可以使用 CSS3属性创建一列以这种方式运行的 div （请参阅 W3 规范）
使用包装器，您可以将列中的所有内容与flex-direction: column;声明对齐，然后用justify content: space-between;and填充垂直空间height: 100vh;。然后你需要做的就是让你的内容元素扩展flex: 1 0 0;并给它一个滚动条overflow-y: auto;。
关于浏览器支持的注意事项 - 虽然大多数现代浏览器都支持 flexbox，但仍有一些限制（参见： http ://caniuse.com/#feat=flexbox ）。我建议使用-webkit-and-ms-前缀。
工作示例：请参阅以下代码片段和此jsfiddle。
body {
display: -webkit-flex; /* Safari 6.1+ */
display: -ms-flex; /* IE 10 */
display: flex;
-webkit-flex-direction: column; /* Safari 6.1+ */
-ms-flex-direction: column; /* IE 10 */
flex-direction: column;
-webkit-justify-content: space-between; /* Safari 6.1+ */
-ms-justify-content: space-between; /* IE 10 */
justify-content: space-between; /* Header top, footer bottom */
height: 100vh; /* Fill viewport height */
}
main {
-webkit-flex: 1 0 0; /* Safari 6.1+ */
-ms-flex: 1 0 0; /* IE 10 */
flex: 1 0 0; /* Grow to fill space */
overflow-y: auto; /* Add scrollbar */
height: 100%; /* Needed to fill space in IE */
}
header, footer {
-webkit-flex: 0 0 auto; /* Safari 6.1+ */
-ms-flex: 0 0 auto; /* IE 10 */
flex: 0 0 auto;
}
/* Make it look a little nicer */
body {
margin: 0;
background-color: #8080ff;
}
header {
background-color: #80ff80;
}
footer {
background-color: #ff8080;
}
p {
margin: 1.25rem;
}
<body>
<header>
<p>header</p>
</header>
<main>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque lobortis augue, in porta arcu dapibus dapibus. Suspendisse vulputate tempus venenatis. Pellentesque ac euismod urna. Donec dui odio, ullamcorper in posuere eu, laoreet sed nisl. Sed vitae vestibulum leo. Maecenas mattis lacus eget nisl malesuada, quis semper urna ornare. Praesent id mauris nec neque aliquet dignissim.</p>
<p>Morbi varius dolor at lorem aliquet lacinia. Aliquam id lacinia quam. Sed vel libero felis. Etiam et pellentesque sem. Aenean bibendum, ante quis luctus tincidunt, elit mauris volutpat nisi, et tempus lectus sapien in mauris. Aliquam condimentum nisl ut elit accumsan hendrerit. Morbi mollis turpis est, id tincidunt ipsum rhoncus eget. Fusce in feugiat lacus. Quisque vel massa magna. Mauris varius congue nisl, vitae pellentesque diam ultricies at. Sed ac nibh ac diam tristique venenatis non nec nisl. Vivamus enim eros, pretium at iaculis nec, pharetra non sem. Aenean ac imperdiet odio.</p>
<p>Morbi varius dolor at lorem aliquet lacinia. Aliquam id lacinia quam. Sed vel libero felis. Etiam et pellentesque sem. Aenean bibendum, ante quis luctus tincidunt, elit mauris volutpat nisi, et tempus lectus sapien in mauris. Aliquam condimentum nisl ut elit accumsan hendrerit. Morbi mollis turpis est, id tincidunt ipsum rhoncus eget. Fusce in feugiat lacus. Quisque vel massa magna. Mauris varius congue nisl, vitae pellentesque diam ultricies at. Sed ac nibh ac diam tristique venenatis non nec nisl. Vivamus enim eros, pretium at iaculis nec, pharetra non sem. Aenean ac imperdiet odio.</p>
</article>
</main>
<footer>
<p>footer</p>
</footer>
</body>
有关如何使用 flexbox 的更多信息，请参阅以下指南：
纯 CSS 解决方案 2 - 显示表格 [旧解决方案]：
这也可以通过使用 CSSdisplay: table;属性来完成（请参阅 W3 规范）。
的HTML：
<div id="screen">
<div id="header"></div>
<div id="content">
<div id="content_frame">
<div id="content_wrap"></div>
</div>
</div>
<div id="footer"></div>
</div>
CSS：
html, body, #screen, #content, #content_frame {
height: 100%; /* Make #screen viewport height and #content fill space */
}
#screen {
display: table;
}
#header, #content, #footer {
display: table-row;
}
#content_frame {
overflow-y: auto; /* Add scrollbar */
position: relative;
}
#content_wrap {
position: absolute; /* Fix problem with overflow in FF */
}
溢出属性对 css 表格元素及其子元素不可靠，因此我不得不嵌套内容。在这种情况下，我被迫嵌套两次并使用position: absolute;它以使其在 Firefox 中工作。也许其他人可以想出一个更优雅的解决方案来避免这种“divitis”。
这是一个正常运行的jsfiddle。
警告：这在 Opera 12 中似乎不起作用！内容 div 占据了父级高度的 100%，这会导致行溢出表格（就像他们在 Firefox 中所做的那样）。