1. 使用绝对定位
对这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条；
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位实现</title>
<style type="text/css">
html,body,div{
padding:0;
margin:0;
}
.header{
position:absolute;
top:0; /*头部绝对定位位置*/
height:100px;
width:100%;
background: red;
}
.footer{
position:absolute;
bottom:0;/*尾部绝对定位位置*/
height:100px;
width:100%;
background:yellow;
}
.main{
position:absolute;
width:100%;
top:100px; /*中间自适应部分绝对定位位置，top是头部的高度*/
bottom:100px; /*bottom是尾部的高度*/
background: #ccc;
overflow:auto; /*超出的部分，滚动条显示*/
}
</style>
</head>
<body>
<div class="container">
<div class="header">我是头部</div>
<div class="main">
我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>
我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>
我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>
我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>
</div>
<div class="footer">我是尾部</div>
</div>
</body>
</html>
2. 使用flex布局
还可以使用flex布局实现这一布局，将flex-direction设置为column，定义排列方向为竖排，还需注意的是要定义页面的整体高度为100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局实现</title>
<style type="text/css">
html,body{
padding:0;
margin:0;
height:100%; /*定义页面整体高度为100%，重要*/
}
.container{
display:flex; /*父元素的定义为flex布局*/
height:100%; /*这里也要定义，重要*/
width:100%;
flex-direction: column; /*定义排列方向为竖排*/
}
.header{
height:100px; /*头部固定高度*/
background: red;
}
.footer{
height:100px; /*尾部固定高度*/
background: yellow;
}
.main{
background: #ccc;
flex:1; /*中间分配剩下的所有空间*/
overflow:auto;
}
</style>
</head>
<body>
<div class="container">
<div class="header">我是头部</div>
<div class="main">
我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
</div>
<div class="footer">我是尾部</div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/moumoon/p/11001682.html