如何让我的flexbox布局占用100%的垂直空间?

时间:2014-04-15 17:06:21

标签: html css css3 flexbox

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

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

enter image description here

我在第3行中有另一个flexbox,它创建了一组列。要正确调整这些列中的元素,我需要它们来理解浏览器的整个高度 - 例如背景颜色和底部的项目对齐。主要布局最终将类似于:

enter image description here

.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布局复制这个想法吗?

3 个答案:

答案 0 :(得分:88)

您应该将height的{​​{1}}设置为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;
}
#col2 {
    background-color: orange;
    flex: 1 1;
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
}

<强> DEMO

答案 1 :(得分:13)

将包装器设置为高度100%

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

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

  height: 100%;
}

并将第3行设置为flex-grow

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

demo

答案 2 :(得分:0)

让我向您展示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”垂直运行。

希望这会有所帮助

丹尼尔