css中调整高度充满_css - DIV高度怎样充满容器？

问 题

代码：

html {

height: 100%;

margin: 0;

padding: 0;

}

body {

height: 100%;

margin: 0;

padding: 0;

}

header {

height: 20px;

}

section {

height: ?; //code here

}

在header元素用px定义高度时，怎样使section元素和header元素高度正好充满容器body?

前段新手，感谢~

解决方案

在浏览器环境支持的情况下，暂时想到可以有几种处理方式：

1、使用box-sizing和padding控制高度并用负margin调整位置

html,body {height:100%;}

header {height: 20px; position: relative;}

section {height: 100%; box-sizing: border-box; padding-top: 20px; margin-top: -20px;}

2、使用calc

html,body {height:100%;}

header {height: 20px;}

section {height: calc(100% - 20px);}

3、使用flex

html, body{height: 100%;}

body {display: flex; flex-direction: column;}

header {flex-grow: 0; flex-shrink: 0; flex-basis: 20px;}

section {flex: 1;}

扫一扫关注IT屋

微信公众号搜索 “ IT屋 ” ，选择关注与百万开发者在一起