如何使我的flexbox布局占用100％的垂直空间？ [英] How can I make my flexbox layout take 100% vertical space?
问题描述
我有一个3行弹性框布局。前两行是固定的高度，但第三是动态的，我想它的增长到浏览器的全高度。
我在row-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;}。 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>这是标题< / div> < div id =row2>这是第二行< / 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布局复制想法吗？
您应该将 height 设置为 html，body。包装器到 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>这是标头< / div> < div id =row2>这是第二行< / div> < div id =row3> < div id =col1> col1< / div> < div id =col2> col2< / div> < div id =col3> col3< / div> < / div>< / div>
How can I tell a flexbox layout row consume the remaining vertical space in a browser window?
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.
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:
.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 height attribute, 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?
You should set height to html, body, .wrapper to 100% (in order to inherit a valid value) and then basically set a flex value superior at 1 to .row3 and none to others.
.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>
这篇关于如何使我的flexbox布局占用100％的垂直空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
