如何让我的 flexbox 布局占据 100% 的垂直空间？答案

【问题标题】：How can I make my flexbox layout take 100% vertical space?如何让我的 flexbox 布局占据 100% 的垂直空间？
【发布时间】：2014-05-30 04:28:21
【问题描述】：

如何告诉 flexbox 布局行消耗浏览器窗口中剩余的垂直空间？

我有一个 3 行的 flexbox 布局。前两行是固定高度，但第三行是动态的，我希望它增长到浏览器的全高。

我在第 3 行有另一个 flexbox，它创建了一组列。为了正确调整这些列中的元素，我需要它们了解浏览器的完整高度——例如背景颜色和底部的项目对齐。主要布局最终会像这样：

.vwrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    //height: 1000px;
}
.vwrapper #row1 {
    background-color: red;
}
.vwrapper #row2 {
    background-color: blue;
}
.vwrapper #row3 {
    background-color: green;
    flex 1 1 auto;
    display: flex;
}
.vwrapper #row3 #col1 {
    background-color: yellow;
    flex 0 0 240px;
}
.vwrapper #row3 #col2 {
    background-color: orange;
    flex 1 1;
}
.vwrapper #row3 #col3 {
    background-color: purple;
    flex 0 0 240px;
}

<body>
    <div class="vwrapper">
        <div id="row1">
            this is the header
        </div>
        <div id="row2">
            this is the second line
        </div>
        <div id="row3">
            <div id="col1">
                col1
            </div>
            <div id="col2">
                col2
            </div>
            <div id="col3">
                col3
            </div>
        </div>
    </div>
</body>

我尝试添加一个height 属性，当我将其设置为硬数字时该属性有效，但当我将其设置为100% 时无效。我知道height: 100% 不起作用，因为内容没有填满浏览器窗口，但我可以使用 flexbox 布局复制这个想法吗？

【问题讨论】：

为视觉效果点赞，你是如何制作它们的？
OmniGraffle 和 Pixelmator 用于修饰。

标签： html css flexbox

【解决方案1】：

您应该将html, body, .wrapper 的height 设置为100%（为了继承完整高度），然后将大于1 的flex 值设置为.row3，而不是其他值。

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}

<div class="wrapper">
    <div id="row1">this is the header</div>
    <div id="row2">this is the second line</div>
    <div id="row3">
        <div id="col1">col1</div>
        <div id="col2">col2</div>
        <div id="col3">col3</div>
    </div>
</div>

DEMO

【讨论】：

有什么方法可以做到这一点，同时让内容 div 扩展以填充其内容？ Forked your example here.
@iameli ，使用 min-height 代替 height fiddle.jshell.net/Lhhh3wde/1
JSFiddle 坏了
这是工作的 codepen 演示：codepen.io/mprinc/pen/JjGQvae 和类似问题中的解释：stackoverflow.com/a/63174085/257561
fiddle 被不应消失的 codepen 取代，它是 sn-p 的副本。注意在今天的 chrome 版本中不再需要 min-height。

【解决方案2】：

让我向您展示另一种 100% 有效的方法。我还将为示例添加一些填充。

<div class = "container">
  <div class = "flex-pad-x">
    <div class = "flex-pad-y">
      <div class = "flex-pad-y">
        <div class = "flex-grow-y">
         Content Centered
        </div>
      </div>
    </div>
  </div>
</div>

.container {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}

  .flex-pad-x {
    padding: 0px 20px;
    height: 100%;
    display: flex;
  }

  .flex-pad-y {
    padding: 20px 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .flex-grow-y {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   }

如您所见，我们可以通过一些用于控制的包装器来实现这一点，同时利用 flex-grow 和 flex-direction 属性。

1：当父“flex-direction”为“行”时，其子“flex-grow”水平工作。 2：当父“flex-direction”为“columns”时，其子“flex-grow”垂直工作。

希望对你有帮助

丹尼尔

【讨论】：

div 矫枉过正。
您可以删除您的flex-pad-y 之一：)
很好..！这是唯一一个让我的“内容”
（在我的页眉和页脚之间）填满整个屏幕高度的例子。所有其他示例似乎都忽略了“height:100%”属性。
这是一个很酷的解决方案。我知道约翰在上面说 DIV 矫枉过正，但我不同意。您需要四个 div 来利用水平和垂直方向的 flex 增长（垂直方向是最重要的！）。很高兴我能帮助你！拥有四个 DIV 为您提供了很大的灵活性。一旦您开始尝试删除 DIV，这种灵活性就会开始减弱！