码迷,mamicode.com
首页 > 其他好文 > 详细

height100%不能生效问题解决

时间:2018-03-19 13:35:20      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:浏览器   题解   问题   png   这一   .com   pos   blog   国产   

height:100%能生效有两种情况。

第一种是父级有显性高度,即写了具体值。当然从html一直往下都赋予height:100%也是属于这种情况。

第二种就是自身绝对定位,父级相对定位脱离文档流。其实原理和上述是一致的(最近的相对定位元素会被认为是最上级的dom)。

解决这个问题可以尝试给予height: inherit 它和height:100%功能类似。但在解决自身是定位元素时可以有奇效。

另一个就是给予显性高度,当然这一办法几乎没用。能写死高度就不会出现这个问题了。

再一个就是无奈的子绝父相了,给予父级相对行为,自身决定定位。

补充:某些国产浏览器中flex布局中的flex:1 在主轴为横向的时候它的子元素height:100% 会失效。这也不难理解毕竟在控制台父级height显示的并不是显性高度。
技术分享图片

height100%不能生效问题解决

标签:浏览器   题解   问题   png   这一   .com   pos   blog   国产   

原文地址:https://www.cnblogs.com/linghongcong/p/8601033.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!