上下定高 中间自适应_css布局------上下高度固定,中间高度自适应容器(容器高度不定)...

HTML

CSS

body,html {

height:100%;

}

/*方法1：绝对定位实现*/

.container {

box-sizing: border-box;

position: relative;

min-height: 100%;

padding: 100px 0;

background-color: blue;

}

.header {

position: absolute;

top: 0;

width: 100%;

height: 100px;

background-color: red;

}

.footer {

position: absolute;

bottom: 0;

width: 100%;

height: 100px;

background-color: red;

}

/*方法2：弹性布局实现*/.container { height: 100%; display: flex; flex-direction: column;}.body { flex: 1 1 auto; background-color: blue;}.header, .footer { height: 100px; flex: 0 0 auto; background-color: red;}