height100%不能生效问题解决

Posted 当然我没扯淡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了height100%不能生效问题解决相关的知识,希望对你有一定的参考价值。

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

第一种是父级有显性高度,即写了具体值。当然从 html 一直往下都赋予height:100%也是属于这种情况。(html=>body=>...=>父级=>目标元素)。

当然设置 max-height 与 min-height 对height:100%是没有用的

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

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

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

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

注意:子元素绝对定位是计算父元素的 padding 值的。而传统的height:100是不计算的。当然使用全局的box-sizing: border-box

补充:某些国产浏览器中 flex 不能继承高度。这也不难理解毕竟在控制台父级 height 显示的并不是显性高度。

以上是关于height100%不能生效问题解决的主要内容,如果未能解决你的问题,请参考以下文章

style=“height: 100%“ 不生效

css让高度百分比,height:100% 生效的3种方法

css有用的代码片段

使flex-direction: column的子元素height: 100%生效的办法

vue中,在全局样式表中设置了html,body,#app的height为 100%,但导入后只有html和body生效了,为啥?

设置整个页面的背景颜色,解决height:100%不起作用问题