我怎样才能让我的柔性箱布局占据100％的垂直空间？

2018-07-01 16:05:18

我怎么能告诉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>

您应该将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;
}
#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;
}

演示

链接地址: http://www.djcxy.com/p/88305.html

上一篇: How can I make my flexbox layout take 100% vertical space?

下一篇: Make nested div stretch to 100% of remaining container div height