Question

这是我的代码。

我希望元素.container完全展开并占据.toplevel的区域。

＆＃13;

.toplevel {
  height: 100%;
  min-height: 800px;
  border: solid 1px blue;
}

.container {
  display: flex;
  border: solid 1px red;
  height: 100%;
  flex: 0 1 auto;
  flex-direction: column;
  // min-height: 800px;
}

.up {
  display: flex;
  flex: 1 1 auto;
}

.down {
  display: flex;
  flex: 0 1 auto;
}

＆＃13;

<div class="toplevel">
  <div class="container">
    <div class="up">
      This is up
    </div>
    <div class="up">
      This is down
    </div>
  </div>
</div>

＆＃13;

然而，似乎使.container更高的高度的唯一方法是定义min-height。它太不灵活了，因为我会为不同的设备外形提供不同的值。

我该如何解决？

Answer 1

Simpy将display: flex添加到.toplevel并从height: 100%删除.container。

这项工作基于以下事实：可以使用align-items属性控制弹性行项目的高度行为。由于它默认为stretch，因此它将填充其父级高度。

作为一个注释，一般来说，当谈到Flexbox时，最好使用自己的属性而不是height / width。通过这样做，您还可以获得更好的跨浏览器支持。

Stack snippet

.toplevel {
  height: 100%;
  min-height: 800px;
  border: solid 1px blue;
  display: flex;              /* added  */
}

.container {
  display: flex;
  border: solid 1px red;
  /*height: 100%;                removed  */
  flex: 1 1 auto;            /*  changed, flex row item need the grow value
                                          to be 1 to fill its parent's width  */
  flex-direction: column;
}

.up {
  display: flex;
  flex: 1 1 auto;
}

.down {
  display: flex;
  flex: 0 1 auto;
}

<div class="toplevel">
  <div class="container">
    <div class="up">
      This is up
    </div>
    <div class="down">
      This is down
    </div>
  </div>
</div>

Answer 2

使用列方向调整display:flex，然后将flex:1添加到容器中：

我认为你在代码中犯了一个错误，因为你添加了两个up div，所以我更正了

.toplevel {
  height: 100%;
  min-height: 800px;
  border: solid 1px blue;
  display:flex;
  flex-direction:column;
}

.container {
  display: flex;
  border: solid 1px red;
  flex: 1;
  flex-direction: column;
}

.up {
  display: flex;
  flex: 1 1 auto;
}

.down {
  display: flex;
  flex: 0 1 auto;
}

<div class="toplevel">
  <div class="container">
    <div class="up">
      This is up
    </div>
    <div class="down">
      This is down
    </div>
  </div>
</div>

Answer 3

您可以撤销var b=[2]的{{1}}和var a = [1,2,2,2,5]; var b = [2]; const result = a.filter(function(el){ return /// which condition .? });：

＆＃13;

height

＆＃13;

min-height

＆＃13;

Answer 4

要使用百分比高度，您需要所有父母都有一个设定的高度。在你的情况下this.type = T父.toplevel，身高不高，body身高.toplevel不起作用，导致{{1}高度也失败了。一个简单的解决方案是使用100%单位而不是百分比设置.container高度：

＆＃13;

.toplevel

＆＃13;

vh

＆＃13;

如何使flex元素完全展开以填充包含元素？

4 个答案: