我使用占用所有可用空间的第三方组件,即width = 100％和height = 100％.我无法控制它.
我试图在以下布局中使用它,但它的高度= 100％不起作用(我希望第三方组件占用所有绿色空间).
为什么？你会如何解决这个问题？
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
.header {
display: flex;
background-color: rgba(255,0.5);
}
.content {
flex-grow: 1;
background-color: rgba(0,255,0.5);
}
.third-party-component {
height: 100%;
width: 100%;
background-color: rgba(0,0.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="third-party-component">
Third party component
</div>
</div>
</div>
解决方法
通常,对于使用高度百分比来获取其父级高度的元素,父级需要
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.5);
}
.content {
position: relative; /* added */
flex-grow: 1;
background-color: rgba(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.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="wrapper">
<div class="third-party-component">
Third party component
</div>
</div>
</div>
</div>
另一种选择可能是更新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.5);
}
.content {
flex: 1 1 100%;
background-color: rgba(0,0.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="third-party-component">
Third party component
</div>
</div>
</div>
