div高度百分比

百分比布局详解

最新推荐文章于 2024-05-30 22:05:48 发布

转载最新推荐文章于 2024-05-30 22:05:48 发布 · 4.4k 阅读

在用百分比的时候，一定要确定父亲节点的高度（宽度是同样的道理）；
比如：
<div id="div1">
     <div id="div2"></div>
</div>
如果给div2设置height:100%;,那么必须明确div1的高度，否则div2的100%，就无法确定，如果要充满整个浏览器窗口，那么就要设置所有的长辈节点都为100%，
比如：
<html>
<head></head>
<body>
<div id="div1">
     <div id="div2"></div>
</div>
</body>
</html>
如果想让div2设置100%达到充满整个浏览器窗口的效果，必须设置它所有的长辈节点为100%,也就是div1，body,html都设置为100%,代码如下：
html,body,#div1,#div2{heigth:100%; margin:0;padding:0;}

总之一句话，要想设置当前节点的高度或宽度百分比，必须“明确”知道父亲节点的高度或宽度