关于height:100%无效的解决办法与细节

         我们知道,对于块级元素浏览器总是默认使其宽度等于父容器宽度的100%不需要自己设定,但是对宽度的计算就并非这样了,当没有显式得定义容器的高度时,其高度由其包裹的内容决定,当显示得定义高度时,容器的高度就为设定的值,使用overflow可以对超出高度的内容进行处理。

         有时我们不明确高度,需要使用height:100%来设定高度时,有时并不能达到预期的效果,主要原因就是当我们使用height:100%时,浏览器会去寻找其父容器的高度来确定这个height:100%具体应该是什么值,当我们没有为父容器显式得定义高度时,浏览器就无法获取相应的值,所以不能达到预期的效果,

         所以,使height:100%生效的根本解决办法就是父级一定要有显式定义的高度

         大家有可能主要到那两个红红的显式,为什么要说显式呢,因为大家常用到的还有一个与Heigh相关的属性:min-height,用来控制元素的最小高度,当我们在父元素使用Min-height来定义最小高度时,子元素使用height:100%也是无法获取高度的,详见如下例子



关于height:100%无效的解决办法与细节_第1张图片

我们可以清除得看见,父元素的高度确实变成了500px,但是子元素并没有获取相应的高度,但如果为父元素添加一个显式的hegiht,如height:2px;这时,子元素就能够正确获取高度(注意,父元素不能使用height:100%,因为同上所讲,其父元素body是没有高度的,所以同样获取不到高度,除非将body.html都加上height:100%,其中html的height:100%获取的是浏览器可视区域的高度)。

关于height:100%无效的解决办法与细节_第2张图片

      查阅了w3cCSS手册,也并没有发现对此的解释,个人认为是应为height默认取值auto,根据子元素来撑起其高度,但是在这种情况下,子元素又依赖于父元素的高度,所以取值为0。若对此各位有更好的见解,欢迎在下方评论提出。


你可能感兴趣的:(CSS探讨)