我怎样才能让我的柔性版式占据100％的垂直空间？
我怎样才能告诉flexbox布局行消耗浏览器窗口中剩余的垂直空间？
我有一个3行的flexbox布局。 前两行是固定的高度，但第三个是dynamic的，我希望它增长到浏览器的整个高度。
我有第3行中的另一个flexbox创build一组列。 为了正确调整这些列中的元素，我需要他们理解浏览器的全部高度 – 例如底色的背景颜色和项目alignment。 主要的布局最终会像这样：
.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% （为了inheritance一个有效的值），然后基本上将flex值设置为1 ，而不是其他值。
.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>
设置包装高度100％
.vwrapper { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; height: 100%; }
并设置第三行以flex-grow
#row3 { background-color: green; flex: 1 1 auto; display: flex; }
演示
