我们经常会需要将一个块级元素设置大小让它显示在页面中，最常用的就是设置具体的值。
例如在页面上显示一个粉色背景的像素为200px*200px的方形
...#mydiv{ width:200px; height:200px;background-color:pink}...<div id="mydiv"></div>...
如果想让该div撑满整个浏览器窗口呢？
1.获取窗口的大小，然后再将值赋给改div的宽和高。（可以用javascript实现）
立即学习“前端免费学习笔记（深入）”；
2.用height:100%;width:100%;
如果直接这样使用
...#mydiv{ width:100%; height:100%;background-color:pink;}...<div id="mydiv">div</div>...
你会发现是根本达不到预期的效果,撑起的部分还是靠div里面的文本
浏览器计算宽度时会参考浏览器窗口的宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。
但是浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。
换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。
那么，如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。
例如:在body中只有一个子元素div，该div的所有父元素就有：body和html
... html,body{ height: 100%; }#mydiv{background-color:blue;height:100%;width:100%}....<div id="mydiv"></div>显示效果：
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
193
收藏
