我如何知道 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, body, .wrapper 的 height 设置为 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>编辑，如@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>关于html - 如何让我的 flexbox 布局占用 100% 的垂直空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56307650/