一、方案
固定我们使用flex，而滚动就必须用到overflow了
- 关于flex的详细介绍请参考之前的文章 弹性布局（display:flex;）属性详解
- 关于overflow
一、直接看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css上中下布局，上下固定，中间自适应滚动</title>
<style>
html, body {
/* 重点，不能少 */
height: 100%;
/* 这里一定要写上，否则外层会出现滚动条 */
margin: 0;
padding: 0;
}
.wrap {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
header, footer {
height: 100px;
width: 100%;
background-color: pink;
}
.main {
width: 100%;
flex: 1;
overflow: auto;
}
</style>
</head>
<body>
<div class="wrap">
<header>header</header>
<div class="main">
<p style="height: 500px">123</p>
<p style="height: 500px">456</p>
</div>
<footer>footer</footer>
</div>
</body>
</html>
三、注意
html, body {
/* 重点，不能少 */
height: 100%;
}