代码之家 › 专栏 › 技术社区 › Misha Moroshko Amr Mostafa

为什么高度=100%不起作用?

flexbox css html

Misha Moroshko Amr Mostafa · 技术社区 · 8 年前

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

我试着把它放在下面的布局中,但是它 高度=100% 不起作用(我希望第三方组件占据所有绿地)。

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

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

3 回复 | 直到 8 年前

Asons Oliver Joseph Ash 8 年前

通常,对于使用百分比的元素 height 为了提高父母的身高,父母需要一个 height other than auto or being positioned absolute ,或 身高 将计算为

基于这两个选项,正如你在评论中提到的,你自己的标题在高度上是动态的,剩下的是绝对位置。

将绝对值添加到 content ,它将退出流并停止作为正常流flex项的行为,好消息是,可以将包装器集添加到absolute。

堆栈代码段

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

另一种选择是更新Flexbox属性,以提供 所容纳之物 a高度,使用 flex: 1 1 100% 并给予 header 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);
}

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

Thuc Nguyen 8 年前

因为 .content 没有高度(高度=0px)和 .third-party-component 拥有100%的0px。您可以添加属性 height : calc (100% - <height of .header>) 进入 .所容纳之物

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

Amit 8 年前

您只需在 .content

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

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