为什么身高= 100％不起作用？

Question

我使用占据所有可用空间的第三方组件，即width=100%和height=100%。我无法控制它。

我试图在以下布局中使用它，但height=100%无效（我希望第三方组件占用所有绿色空间）。

为什么呢？你会如何解决这个问题？

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100px;
}

.header {
  display: flex;
  background-color: rgba(255, 0, 0, 0.5);
}

.content {
  flex-grow: 1;
  background-color: rgba(0, 255, 0, 0.5);
}

.third-party-component {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 255, 0.5);
}

＆＃13;

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="third-party-component">
      Third party component
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

通常，对于使用height上的百分比来获取其父级高度的元素，父级需要height other than auto or being positioned absolute，或height将计算为auto

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

向content添加绝对值的问题，它将被取消流程并停止表现为正常流动的弹性项目，好消息，可以将包装器集添加到绝对值。

Stack snippet

.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);
}

<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>

另一种选择可能是使用content更新Flexbox属性，为flex: 1 1 100%提供一个高度，并提供header flex-shrink: 0;，这样它就不会缩小（如content获得了100％）。

这可能不适用于Safari，因为我知道在没有设置height属性的情况下会出现问题，但现在无法测试，因为我无法访问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);
}

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="third-party-component">
      Third party component
    </div>
  </div>
</div>

Answer 2

因为.content没有高度（高度= 0px）而.third-party-component有100％的0px。您可以将height : calc (100% - <height of .header>)添加到.content

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100px;
}

.header {
  display: flex;
  background-color: rgba(255, 0, 0, 0.5);
}

.content {
  height: calc(100% - 18px);
  flex-grow: 1;
  background-color: rgba(0, 255, 0, 0.5);
}

.third-party-component {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 255, 0.5);
}

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="third-party-component">
      Third party component
    </div>
  </div>
</div>

Answer 3

您可以在.content元素中使用另一个弹性容器：

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100px;
}

.header {
  display: flex;
  background-color: rgba(255, 0, 0, 0.5);
}

.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 255, 0, 0.5);
}

.third-party-component {
  flex-grow: 1;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 255, 0.5);
}

＆＃13;

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="third-party-component">
      Third party component
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;