html高度无法获取百分比,HTML – 为什么高度= 100％不起作用？

通常,对于使用高度百分比来获取其父级高度的元素,父级需要

height other than auto or being positioned absolute,否则高度将计算为auto.

根据这两个选项,正如您在评论中提到的那样,您自己的标题在高度上是动态的,您将保留绝对定位.

添加绝对内容的问题,它将被取出流程并停止表现为正常流动的flex项目,好消息,可以添加包装设置为绝对.

堆栈代码段

.container {

display: flex;

flex-direction: column;

width: 200px;

height: 100px;

}

.header {

display: flex;

background-color: rgba(255, 0, 0, 0.5);

}

.content {

position: relative; /* added */

flex-grow: 1;

background-color: rgba(0, 255, 0, 0.5);

}

.wrapper {

position: absolute; /* added */

left: 0; /* added */

top: 0; /* added */

right: 0; /* added */

bottom: 0; /* added */

}

.third-party-component {

height: 100%;

width: 100%;

background-color: rgba(0, 0, 255, 0.5);

}

Header

Third party component

另一种选择可能是更新Flexbox属性,使用flex：1 1 100％给出内容高度,并给出标题flex-shrink：0;所以它不缩小(内容得到100％).

这可能不适用于Safari,因为我知道它没有设置高度属性时出现问题,但现在无法测试,因为我无法访问Safari.

.container {

display: flex;

flex-direction: column;

width: 200px;

height: 100px;

}

.header {

display: flex;

flex-shrink: 0;

background-color: rgba(255, 0, 0, 0.5);

}

.content {

flex: 1 1 100%;

background-color: rgba(0, 255, 0, 0.5);

}

.third-party-component {

height: 100%;

width: 100%;

background-color: rgba(0, 0, 255, 0.5);

}

Header

Third party component