html页面纵向自适应 页面布局之上下固定中间自适应.html

绝对定位实现

html,

body,

div {

padding: 0;

margin: 0;

}

.container:after {

content: ".";

dispaly: block;

height: 0;

clear: both;

visibility: hidden;

}

.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;

/*超出的部分，滚动条显示*/

}

我是头部

我是中间自适应

我是中间自适应

我是中间自适应

我是中间自适应

我是中间自适应

我是中间自适应

我是中间自适应

我是中间自适应

我是中间自适应

我是中间自适应

我是中间自适应

我是中间自适应

我是尾部

一键复制

编辑

Web IDE

原始数据

按行查看

历史

如果觉得《html页面纵向自适应 页面布局之上下固定中间自适应.html》对你有帮助，请点赞、收藏，并留下你的观点哦！