使用绝对定位
对这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条；
代码实现：
<!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>
使用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>