关于div的height属性设置失效
今天拿到了老师给我的作业点评。实现div纵向按照比例布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{height: 100%;}
#div4{height: 40%;background-color: red;}
#div6{height: 60%;background-color: blue;}
</style>
</head>
<body>
<div id="div6"></div>
<div id="div4"></div>
</body>
</html>
这样两个div6-4分占了全部高度，问题是单独设置body为100%却不行。
为什么在设置宽度的width的时候只用设置body，不用设置html。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{width: 100%;}
div{
float: left;
height: 600px;
}
#div4{width: 40%; background-color: red;}
#div6{width: 60%; background-color: blue;}
</style>
</head>
<body>
<div id="div6"></div>
<div id="div4"></div>
</body>
</html>
单独设置div的高度为百分比无效，因为是靠内容撑开的，我看了很多帖子都是这么回复，希望老师可以详细说下，width在用百分比的时候，如果不写，默认就是父级元素的百分之百，height如果不写会怎么计算呢
正在回答
同学你好， 你好对于你的问题解答如下：
因为body默认高度是由内容撑开高度的，而设置百分比高度是参考父元素高度计算的，所以需要给body的父元素html也设置高度才可以。
html的默认高度是参考窗口，也就是说给html设置百分百高度会自动填充窗口高度，然后在给body设置百分百高度，就可以铺满全屏显示了。
不设置height属性时，高度是由内容撑开高度的，也就是说内容实际占据的高度是多少，盒子的高度就是多少
"NEO_GD"同学提供的方法也是可以的，由于绝对定位后，元素会脱离文档流，导致蓝色盒子部分被覆盖了，所以没有实现全屏的效果。建议：可以给蓝色盒子设置top属性，让其完整显示出来，示例：
同学可以测试理解下，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星