当前位置:Gxlcms > html代码 > 关于块级元素撑满整个浏览器窗口_html/css_WEB-ITnose

关于块级元素撑满整个浏览器窗口_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:62人阅读

我们经常会需要将一个块级元素设置大小让它显示在页面中,最常用的就是设置具体的值。

例如在页面上显示一个粉色背景的像素为200px*200px的方形

...#mydiv{    width:200px;    height:200px;background-color:pink}...
...

如果想让该div撑满整个浏览器窗口呢?

1.获取窗口的大小,然后再将值赋给改div的宽和高。(可以用javascript实现)

2.用height:100%;width:100%;

如果直接这样使用

...#mydiv{    width:100%;    height:100%;background-color:pink;}...
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%}....

显示效果:

人气教程排行