您的位置:首页 > Web前端 > CSS

css布局(上下固定,中间自适应)

2017-06-20 10:35 344 查看
要实现页面的上下固定,中间自适应:

1:上下固定高度

.header{
background-color: #f55d54;
width: 100%;
height: 50px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
position: fixed;
left: 0;
top: 0;
z-index: 99;
}
.footer{
width: 100%;
height: 50px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
position: fixed;
left: 0;
bottom: 0;
background-color: #fff;
font-size: 12px;
border-top: 1px solid #e7e7e7;
}
2:中间自适应,采用fixed布局去掉上下的高度,超出自动滚动
.homeContent{
position: absolute;
top: 50px;
width: 100%;
left: 0;
bottom: 50px;
overflow: auto;
}

3:页面布局
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: