如何使Flexbox布局占用100％的垂直空间？

102

如何告诉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布局复制想法吗？

html css flexbox

— 邪恶的壁橱猴子
source

支持视觉效果，您是如何制作的？

— 乔纳森

OmniGraffle和Pixelmator用于修饰。

— Evil Closet Monkey

Answers:

115

你应该设置height的html, body, .wrapper，以100%（为了继承全高），然后只设置一个flex值大于1对.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>

展开摘要

演示

— 丙酸杆菌
source

有什么办法做到，同时让内容div扩展以填充其内容？在这里分叉了您的例子。

— iameli

@iameli，使用min-height代替chrome的高度fiddle.jshell.net/Lhhh3wde/1

— G-Cyrillus

JSFiddle遭到破坏

— 乔尔·佩尔顿

这是工作中的codepen演示：codepen.io/mprinc/pen/JjGQvae和类似问题的解释：stackoverflow.com/a/63174085/257561

— mPrinC

小提琴替换为不应该消失的codepen，它是代码段的副本。请注意，在今天的Chrome版本中，不再需要最小高度。

— G-Cyrillus

将包装纸的高度设置为100％

.vwrapper {
  display: flex;
  flex-direction: column;

  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;

  height: 100%;
}

并将第三行设置为flex-grow

#row3 {
   background-color: green;
   flex: 1 1 auto;
   display: flex;
}

演示

— 值
source

以我为例，html，body，.wrapper {height：100％; } 正在工作。不仅包装工作。

— gnganpath

让我向您展示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”为“ row”时，其子级“ flex-grow”为水平方向。2：当父级“ flex-direction”为“ columns”时，其子级“ flex-grow”垂直运行。

希望这可以帮助

丹尼尔

— GaddMaster
source

div过度杀伤力。

— 约翰

您可以删除自己的一个flex-pad-y：)

— Eoin

很好..！这是唯一使我的“内容” <div>（在页眉和页脚之间）充满整个屏幕高度的示例。所有其他示例似乎都忽略了“高度：100％”属性。

— 迈克·格莱德希尔

这是一个很酷的解决方案。我知道约翰在DIV矫over过正之上，但我不同意。您需要四个div才能在水平和垂直方向上都使用flex增长（实际上是最重要的一个！）。很高兴我能帮助你！拥有四个DIV给您很大的灵活性。一旦开始尝试删除DIV，这种灵活性就会开始减弱！

— GaddMaster