版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/betty13006159467/article/details/82216629
常用的页面布局除了两边固定中间自适应和一端固定另一端自适应之外，还有上下固定中间自适应的布局，今天在这里做一下总结。
实现这种布局我主要通过两种方法：
使用绝对定位
对这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条；
代码实现：
<!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>
关于这种布局，目前我所找到的就是这两种方法，以后再有学习到，会来补充。