上下固定中间自适应布局

1. 使用绝对定位

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

代码实现：

<!DOCTYPE html>

<head>

<title>绝对定位实现</title>

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>

我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>

我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>

</div>

</div>

</body>

</html>

2. 使用flex布局

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

<!DOCTYPE html>

<head>

<title>flex布局实现</title>

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>

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

</div>

</div>

</body>

</html>

上下固定中间自适应布局

猜你喜欢