使用 display:flex 用 CSS 填充剩余的垂直空间 [英] Fill remaining vertical space with CSS using display:flex

问题描述

在 3 行布局中:

• 顶行应根据其内容调整大小
• 底行应该有一个固定的像素高度
• 中间一行应该展开以填满容器

问题是随着主要内容的扩展，它会挤压页眉和页脚行:

HTML:

<标题>标题:根据内容调整大小<br>(但真的是这样吗?)</标题><div>主要内容:填充剩余空间<br>x
x
x
x
x
x
x
x
x
x
<!-- 取消注释以查看它是否中断-->x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
<!-- -->

<页脚>页脚:以像素为单位的固定高度</页脚></节>

CSS:

section {显示:弹性；弹性流:列；对齐项目:拉伸；高度:300px；}标题{弹性:0 1 自动；背景:番茄；}div {弹性:1 1 自动；背景:黄金；溢出:自动；}页脚{弹性:0 1 60px；背景:浅绿色；/* 修复页脚: min-height: 60px;*/}

小提琴:

• http://jsfiddle.net/7yLFL/1/(工作中，内容较少)
• http://jsfiddle.net/7yLFL/(已损坏，内容较大)

我很幸运，可以使用 CSS 中最新最好的，而不考虑旧版浏览器.我想我可以使用 flex 布局来最终摆脱旧的基于表格的布局.出于某种原因，它没有做我想做的......

作为记录，有很多关于填充剩余高度"的相关问题，但没有解决我在使用 flex 时遇到的问题.参考:

• 让一个 div 填充剩余屏幕空间的高度
• 填充剩余的垂直空间 - 仅 CSS
• 在与另一个 div 共享容器时，是否有一个 div 来填充容器的剩余高度/宽度?​​
• 使嵌套 div 拉伸到剩余容器 div 高度的 100%
• 如何让我的 flexbox 布局占据 100% 的垂直空间?
• 等

解决方案

让它变得简单:DEMO

section {显示:弹性；弹性流:列；高度:300px；}标题{背景:番茄；/* 没有弹性规则，它会增长 */}div {弹性:1；/* 1 如果没有为其他子节点设置 flex 值，它将填充整个剩余空间*/背景:黄金；溢出:自动；}页脚{背景:浅绿色；最小高度:60px；/* min-height 有它的用途 :) ，除非你指的是高度*/}

<标题>标题:根据内容调整大小<br/>(但真的是这样吗?)</标题><div>主要内容:填充剩余空间<br>X<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x
<!-- 取消注释以查看它是否中断-->x
x
x
x
x
x
x
x
x
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><!-- -->

<页脚>页脚:以像素为单位的固定高度</页脚></section>

全屏版

section {显示:弹性；弹性流:列；高度:100vh；}标题{背景:番茄；/* 没有弹性规则，它会增长 */}div {弹性:1；/* 1 如果没有为其他子节点设置 flex 值，它将填充整个剩余空间*/背景:黄金；溢出:自动；}页脚{背景:浅绿色；最小高度:60px；/* min-height 有它的用途 :) ，除非你指的是高度*/}身体 {边距:0；}

<标题>标题:根据内容调整大小<br/>(但真的是这样吗?)</标题><div>主要内容:填充剩余空间<br>X<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x
<!-- 取消注释以查看它是否中断-->x
x
x
x
x
x
x
x
x
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><!-- -->

<页脚>页脚:以像素为单位的固定高度</页脚></section>

In a 3-row layout:

• the top row should be sized according to its contents
• the bottom row should have a fixed height in pixels
• the middle row should expand to fill the container

The problem is that as the main content expands, it squishes the header and footer rows:

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>

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 {
  flex: 0 1 60px;
  background: lightgreen;
  /* fixes the footer: min-height: 60px; */
}

Fiddle:

• http://jsfiddle.net/7yLFL/1/ (working, with small content)
• http://jsfiddle.net/7yLFL/ (broken, with larger content)

I'm in the lucky situation that I can use the latest and greatest in CSS, disregarding legacy browsers. I thought I could use the flex layout to finally get rid of the old table-based layouts. For some reason, it's not doing what I want...

For the record, there are many related questions on SO about "filling the remaining height", but nothing that solves the problem I'm having with flex. Refs:

• Make a div fill the height of the remaining screen space
• Fill remaining vertical space - only CSS
• Have a div to fill out the remaining height/width of a container when sharing it with another div?
• Make nested div stretch to 100% of remaining container div height
• How can I make my flexbox layout take 100% vertical space?
• etc

解决方案

Make it simple : DEMO

section {
  display: flex;
  flex-flow: column;
  height: 300px;
}

header {
  background: tomato;
  /* no flex rules, it will grow */
}

div {
  flex: 1;  /* 1 and it will fill whole space left if no flex value are set to other children*/
  background: gold;
  overflow: auto;
}

footer {
  background: lightgreen;
  min-height: 60px;  /* min-height has its purpose :) , unless you meant height*/
}

<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>

Full screen version

section {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

header {
  background: tomato;
  /* no flex rules, it will grow */
}

div {
  flex: 1;
  /* 1 and it will fill whole space left if no flex value are set to other children*/
  background: gold;
  overflow: auto;
}

footer {
  background: lightgreen;
  min-height: 60px;
  /* min-height has its purpose :) , unless you meant height*/
}

body {
  margin: 0;
}

<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>

这篇关于使用 display:flex 用 CSS 填充剩余的垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！