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>