1. 程式人生 > >css布局------上下高度固定,中間高度自適應容器(容器高度不定)

css布局------上下高度固定,中間高度自適應容器(容器高度不定)

add red clas footer oot 容器 html pad 布局

HTML

<body>
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
</body>

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

css布局------上下高度固定,中間高度自適應容器(容器高度不定)