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

         我们知道,对于块级元素浏览器总是默认使其宽度等于父容器宽度的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。若对此各位有更好的见解,欢迎在下方评论提出。


  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值