css 如何使Flexbox版面占用100%的垂直空间？

7kjnsjlb 于 2022-12-27 发布在其他

关注(0)|答案(5)|浏览(196)

如何判断弹性框布局行是否占用浏览器窗口中的剩余垂直空间？
我有一个3行的FlexBox布局。前两行是固定高度的，但第3行是动态的，我希望它能增长到浏览器的全高。

我在row-3中有另一个弹性框，它创建了一组列。为了正确调整这些列中的元素，我需要它们了解浏览器的整个高度--例如背景颜色和底部的项目对齐方式。主要布局最终将类似于：

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

css

来源：https://stackoverflow.com/questions/23090136/how-can-i-make-my-flexbox-layout-take-100-vertical-space

5条答案

按热度按时间

epfja78i1#

您应该将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>

- 一个

编辑，正如@Basj提到的，代码可以被缩短。我们现在也可以使用广泛实现的网格：下面是一个例子与网格为游客：
一个二个一个一个

赞(0）回复(0）举报 2022-12-27

ctehm74n2#

将 Package 器高度设置为100%

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

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

  height: 100%;
}

并将第3行设置为灵活增长

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

demo

赞(0）回复(0）举报 2022-12-27

bfrts1fy3#

让我向您展示另一种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属性的一些 Package 器来实现这一点。
1：当父级"flex-direction"为"row"时，其子级"flex-grow"水平工作。2：当父级"flex-direction"是"columns"时，其子级"flex-grow"垂直工作。
希望这能帮上忙
Daniel

赞(0）回复(0）举报 2022-12-27

8zzbczxx4#

公认的答案是非常好的，但我注意到wrapper和其他一些CSS规则是不需要的。下面是一个最小版本：

html, body { height: 100%; }
body { display: flex; flex-direction: column; margin: 0; }
#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; }

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

赞(0）回复(0）举报 2022-12-27

nszi6y055#

只需增加高度：100 vh;，而不是100%。

赞(0）回复(0）举报 2022-12-27