我怎样才能使我的 flexbox 布局占据100% 垂直空间？

在浏览器窗口中，如何告诉一个 flexbox 布局行占据剩余的垂直空间？

我有一个三排 flexbox 布局。前两行是固定高度，但第三行是动态的，我希望它占据浏览器的全部高度。

enter image description here

我在第3行有另一个 flexbox，它创建了一组 columns。为了正确地调整这些列中的元素，我需要它们理解浏览器的整个高度——例如背景颜色和基础项目对齐方式。主要的布局将最终类似于这样:

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





this is the header




this is the second line






col1




col2




col3

我试过添加一个 height属性，当我将它设置为一个硬数字时，它会工作，但是当我将它设置为 100%时，它就不工作了。我知道 height: 100%不起作用，因为内容没有填满浏览器窗口，但是我可以用 Flexbox 布局复制这个想法吗？

236028 次浏览
小开

将包装设置为高度100% 

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


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


height: 100%;
}

并设置第三行为伸缩增长

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

小样

小开
最佳答案

您应该将 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 提到的，代码可以缩短。我们现在也可以广泛使用网格实现: 下面是一个为访问者提供网格的例子:

body {height: 100vh;display: grid;grid-template-rows:auto auto 1fr;margin: 0;background-color: orange;grid-template-columns:240px 1fr 240px;}
[id^=row]{grid-column:1/-1}
#row1 {background-color: red;}
#row2 {background-color: blue;}
#row3 {background-color: green;}
#col1 {background-color: yellow;}
#col3 {background-color: purple;}
<div id="row1">this is the header</div>
<div id="row2">this is the second line</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>

小开

让我向您展示另一种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 增长 & flex 方向属性。

1: 当父元素“ flex-direct”是一个“ row”时，它的子元素“ flex-growth”水平地工作。 2: 当父元素“ flex-direct”是“ column”时，它的子元素“ flex-growth”垂直工作。

希望这个能帮上忙

丹尼尔

小开

接受的答案是非常好的，但我注意到 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>


提交答案