Question

以3行布局：

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

问题在于，当主要内容扩展时，它会搜索页眉和页脚行：

Flexing Bad

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; */
}

小提琴：

http://jsfiddle.net/7yLFL/1/（工作，内容很少）
http://jsfiddle.net/7yLFL/（已损坏，内容较大）

我很幸运，我可以使用最新最好的CSS，无视旧版浏览器。我以为我可以使用flex布局来最终摆脱旧的基于表格的布局。出于某种原因，它没有做我想做的事情......

为了记录，有很多相关的问题关于＆＃34;填补剩余的高度＆＃34;，但没有解决我与flex有关的问题。参考文献：

Answer 1

简单说明： 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>

Answer 2

如果展开的中心组件的内容超出其边界，则下面的示例包括滚动行为。此外，中心组件在视口中占用剩余空间的100％。

jsfiddle here

var str = "Who said (romance) was dead?";

var wordToBeStronged = "romance";

str = str.split( "(" + wordToBeStronged + ")" ).join( "<strong>" + wordToBeStronged + "</strong>" );

console.log( str );

可用于演示此行为的html示例

html, body, .r_flex_container{
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}
.r_flex_container {
    display:flex;
    flex-flow: column nowrap;
    background-color:blue;
}

.r_flex_fixed_child {
    flex:none;
    background-color:black;
    color:white;

}
.r_flex_expand_child {
    flex:auto;
    background-color:yellow;
    overflow-y:scroll;
}

Answer 3

A more modern approach would be to use the grid property.

section {
  display: grid;
  align-items: stretch;
  height: 300px;
  grid-template-rows: min-content auto 60px;
}
header {
  background: tomato;
}
div {
  background: gold;
  overflow: auto;
}
footer {
  background: lightgreen;
}

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

Answer 4

对主要内容div使用flex-grow属性，并将dispaly: flex;赋予其父级；

body {
    height: 100%;
    position: absolute;
    margin: 0;
}
section {
  height: 100%;
  display: flex;
  flex-direction : column;
}
header {
  background: tomato;
}
div {
  flex: 1; /* or flex-grow: 1  */;
  overflow-x: auto;
  background: gold;
}
footer {
  background: lightgreen;
  min-height: 60px;
}

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

Answer 5

这是显示解决方案的 codepen演示：

Demo - Fill remaining vertical space with CSS using display:flex

重要亮点：

html，body，... .container中的所有容器都应将高度设置为100％
在任何弹性项目中引入flex 将触发基于弹性分布的项目尺寸计算：
- 如果仅将一个单元格设置为flex，例如：flex: 1，则此弹性项将占用剩余空间
- 如果具有flex属性的个以上，则计算将更加复杂。例如，如果将项目1设置为flex: 1，而将项目2设置为flex: 2，则项目2将占用剩余空间的两倍。
  - 不正确：项目2将比项目1大两倍
  - 详细了解剩余空间的概念：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
Main Size Property
- 取决于flex-direction属性的值
- 在我们的情况下，高度仅为preferred size
- 在flex属性为https://www.w3.org/TR/css-flexbox-1/#propdef-flex的情况下它将被覆盖
  - 当盒子是可伸缩物品时，将使用而不是main size property 来查询是否可确定盒子的主要尺寸
- min-*和max-*将受到尊重

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

5 个答案: