相关疑难解决方法(0)

使用display:flex填充剩余的垂直空间

在3排布局中:

顶行应根据其内容确定大小
底行应具有固定的高度(以像素为单位)
中间行应该展开以填充容器

问题是,当主要内容扩展时,它会删除页眉和页脚行:

弯曲不好

HTML:

<section>
  <header>
    header: sized to content
    <br>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break - ->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>

Run Code Online (Sandbox Code Playgroud)

CSS:

section {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  height: 300px;
}
header {
  flex: 0 1 auto;
  background: tomato;
}
div {
  flex: 1 1 auto;
  background: gold;
  overflow: auto;
}
footer …

Run Code Online (Sandbox Code Playgroud)

css layout flexbox

Zil*_*ilk

2017 05-23

160
推荐指数

5
解决办法

16万
查看次数

如何让我的flexbox布局占用100%的垂直空间？

如何告诉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;
}

Run Code Online (Sandbox Code Playgroud)