Html 如何让我的 flexbox 布局占据 100% 的垂直空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23090136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make my flexbox layout take 100% vertical space?
提问by Evil Closet Monkey
How can I tell a flexbox layout row consume the remaining vertical space in a browser window?
如何判断 flexbox 布局行占用了浏览器窗口中剩余的垂直空间？
I have a 3-row flexbox layout. The first two rows are fixed height, but the 3rd is dynamic and I would like it to grow to the full height of the browser.
我有一个 3 行的 flexbox 布局。前两行是固定高度，但第三行是动态的，我希望它增长到浏览器的全高。
I have another flexbox in row-3 which creates a set of columns. To properly adjust elements within these columns I need them to understand the full height of the browser -- for things like background color and item alignments at the base. The major layout would ultimately resemble this:
我在第 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>I've tried adding a heightattribute, which does work when I set it to a hard number but not when I set it to 100%. I understand height: 100%isn't working, because the content isn't filling the browser window, but can I replicate the idea using the flexbox layout?
我试过添加一个height属性，当我将它设置为一个硬数字时它确实有效，但当我将它设置为100%. 我知道height: 100%不起作用，因为内容没有填满浏览器窗口，但是我可以使用 flexbox 布局复制这个想法吗？
回答by G-Cyrillus
You should set heightof html, body, .wrapperto 100%(in order to inherit full height) and then just set a flexvalue greater than 1to .row3and not on the others.
你应该设置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;
}
#col2 {
background-color: orange;
flex: 1 1;
}
#col3 {
background-color: purple;
flex: 0 0 240px;
}<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>回答by vals
set the wrapper to height 100%
将包装器设置为高度 100%
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
height: 100%;
}
and set the 3rd row to flex-grow
并将第三行设置为 flex-grow
#row3 {
background-color: green;
flex: 1 1 auto;
display: flex;
}
回答by GaddMaster
Let me show you another way that works 100%. I will also add some padding for the example.
让我向您展示另一种 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;
}
As you can see we can achieve this with a few wrappers for control while utilising the flex-grow & flex-direction attribute.
正如您所看到的，我们可以在利用 flex-grow 和 flex-direction 属性的同时，通过一些用于控制的包装器来实现这一点。
1: When the parent "flex-direction" is a "row", its child "flex-grow" works horizontally. 2: When the parent "flex-direction" is "columns", its child "flex-grow" works vertically.
1：当父“flex-direction”是“row”时，它的子“flex-grow”水平工作。2：当父“flex-direction”为“columns”时，其子“flex-grow”垂直工作。
Hope this helps
希望这可以帮助
Daniel
丹尼尔
