上下定高 中间自适应_上下固定中间自适应布局

1. 使用绝对定位

对这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条；

代码实现：

绝对定位实现

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; /*超出的部分，滚动条显示*/

}

我是头部

我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应

我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应

我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应

我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应

我是尾部

2. 使用flex布局

还可以使用flex布局实现这一布局，将flex-direction设置为column，定义排列方向为竖排，还需注意的是要定义页面的整体高度为100%

flex布局实现

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;

}

我是头部

我是flex布局实现的中间自适应
我是flex布局实现的中间自适应

我是flex布局实现的中间自适应
我是flex布局实现的中间自适应

我是flex布局实现的中间自适应
我是flex布局实现的中间自适应

我是flex布局实现的中间自适应
我是flex布局实现的中间自适应

我是flex布局实现的中间自适应
我是flex布局实现的中间自适应

我是flex布局实现的中间自适应
我是flex布局实现的中间自适应

我是flex布局实现的中间自适应
我是flex布局实现的中间自适应

我是flex布局实现的中间自适应
我是flex布局实现的中间自适应

我是flex布局实现的中间自适应
我是flex布局实现的中间自适应

我是flex布局实现的中间自适应
我是flex布局实现的中间自适应

我是尾部