关于布局：使用display：flex填充剩余的垂直空间


Fill remaining vertical space with CSS using display:flex

在三行布局中：

  • 顶行应根据其内容调整大小
  • 底行的高度应固定(以像素为单位)
  • 中间一行应展开以填充容器

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

Flexing Bad

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section>
  <header>
    header: sized to content
    (but is it really?)
  </header>
 
    main content: fills remaining space
    xxxxxxxxxx
    <!-- uncomment to see it break - ->
    xxxxxxxxx
    xxxxxxxxx
    xxxxxxxxx
    xxxxxxxxx
    <!-- -->
 
  <footer>
    footer: fixed height in px
  </footer>
</section>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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://jsfidle.net/7ylfl/1/(工作，内容小)
  • http://jsfiddle.net/7ylfl/(破损，内容较大)

我很幸运，我可以使用最新和最棒的CSS，而不用理会传统的浏览器。我想我可以使用flex布局来最终摆脱旧的基于表的布局。因为某种原因，这不是我想要的…

据记录，关于"填充剩余高度"有很多相关的问题，但是没有任何问题能解决我使用flex的问题。参考文献：

  • 使一个DIV填充剩余屏幕空间的高度
  • 填充剩余垂直空间-仅CSS
  • 当与另一个DIV共享容器时，是否有一个DIV来填充容器的剩余高度/宽度？
  • 使嵌套的DIV拉伸到剩余容器DIV高度的100%
  • 如何使我的flexbox布局采用100%垂直空间？
  • 等
相关讨论

简单点：演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section>
  <header>
    header: sized to content
    <br/>(but is it really?)
  </header>
 
    main content: fills remaining space x
    xxxxxxxxx
    <!-- uncomment to see it break -->
    xxxxxxxxx x
    xxxxxxxx x
    xxxxxxxx x
    xxxxxxxx
    <!-- -->
 
  <footer>
    footer: fixed height in px
  </footer>
</section>

相关讨论

下面的示例包括如果扩展中心组件的内容超出其边界，则会发生滚动行为。此外，中心组件占视区中剩余空间的100%。

在这里闲逛

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<body>
   
     
        <p>
 This is the fixed 'header' child of the flex container
</p>
     
     
            this child container expands to use all of the space given to it -  but could be shared with other expanding childs in which case they would get equal space after the fixed container space is allocated.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
            </article>
     
     
        this is the fixed footer child of the flex container
        asdfadsf
        <p>
 another line
</p>
     

   
</body>
</html>
相关讨论

更现代的方法是使用网格属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section>
  <header>
    header: sized to content
    (but is it really?)
  </header>
 
    main content: fills remaining space
    xxxxxxxxxx
   
    xxxxxxxxx
    xxxxxxxxx
    xxxxxxxxx
    xxxxxxxxx
   
 
  <footer>
    footer: fixed height in px
  </footer>
</section>

相关讨论