css - DIV高度怎样充满容器？
本文介绍了css - DIV高度怎样充满容器？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title></title>
<style type="text/css">
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 20px;
}
section {
height: ?; //code here
}
</style>
</head>
<body>
<header></header>
<section></section>
</body>
</html>在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;}
这篇关于css - DIV高度怎样充满容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
