关于height：100%无效的解决办法与细节
我们知道，对于块级元素浏览器总是默认使其宽度等于父容器宽度的100%不需要自己设定，但是对宽度的计算就并非这样了，当没有显式得定义容器的高度时，其高度由其包裹的内容决定，当显示得定义高度时，容器的高度就为设定的值，使用overflow可以对超出高度的内容进行处理。 有时我们不明确高度，需要使用height:100%来设定高度时，有时并不能达到预期的效果，主要原因就是当我们使用h
我们知道，对于块级元素浏览器总是默认使其宽度等于父容器宽度的100%不需要自己设定，但是对宽度的计算就并非这样了，当没有显式得定义容器的高度时，其高度由其包裹的内容决定，当显示得定义高度时，容器的高度就为设定的值，使用overflow可以对超出高度的内容进行处理。
有时我们不明确高度，需要使用height:100%来设定高度时，有时并不能达到预期的效果，主要原因就是当我们使用height:100%时，浏览器会去寻找其父容器的高度来确定这个height:100%具体应该是什么值，当我们没有为父容器显式得定义高度时，浏览器就无法获取相应的值，所以不能达到预期的效果，
所以，使height:100%生效的根本解决办法就是父级一定要有显式定义的高度
大家有可能主要到那两个红红的显式，为什么要说显式呢，因为大家常用到的还有一个与Heigh相关的属性：min-height，用来控制元素的最小高度，当我们在父元素使用Min-height来定义最小高度时，子元素使用height:100%也是无法获取高度的，详见如下例子
<body>
<div style="min-height: 500px">
<div style="height: 100%;background-color: #000"></div>
</div>
</body>
我们可以清除得看见，父元素的高度确实变成了500px，但是子元素并没有获取相应的高度，但如果为父元素添加一个显式的hegiht，如height:2px;这时，子元素就能够正确获取高度（注意，父元素不能使用height:100%,因为同上所讲，其父元素body是没有高度的，所以同样获取不到高度，除非将body.html都加上height:100%，其中html的height:100%获取的是浏览器可视区域的高度）。
查阅了w3cCSS手册，也并没有发现对此的解释，个人认为是应为height默认取值auto，根据子元素来撑起其高度，但是在这种情况下，子元素又依赖于父元素的高度，所以取值为0。若对此各位有更好的见解，欢迎在下方评论提出。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)