三行布局，整个布局 是否可以 自适应 中间内容高度？

Question

首先是一个三行布局，头尾容器高度自适应（高度有限），中间容器内容 可多可少

当 中间内容 较少时
整个布局高度没有超过页面高度，这时中间容器自适应内容高度，整个布局只占整个页面空间的一部分。

当 中间内容 较多时
整个布局超过了页面高度，这时中间容器内容溢出滚动，整个布局占满整个页面空间

中间内容少  | 中间内容多  | 不正确布局  |
========== | ========== | ========== | 
---------- | ---------- | ---------- |
 Head      |  Head      |  Head      |
---------- | ---------- | ---------- |
 Line 1    |  Line 1  ^ |  Line 1    |
 Line 2    |  Line 2  | |  Line 2    |
---------- |  ...     | |            |
 foot      |  ...     v |            |
---------- | ---------- | ---------- |
           |  Foot      |  Foot      |
           | ---------- | ---------- |
========== | ========== | ========== |

Answer 1

实现的方式有很多种：

1. 最简单的如果头尾高度固定，那么使用 max-height 和 calc() 即可。
   CodePen在线Demo1
2. 如果头尾高度不固定，但是有最大高度限制，那么使用 flex 布局即可。
   CodePen在线Demo2

具体可以借鉴张鑫旭大佬的 小测试CSS基础测试7 了解类似的布局思路。

相关文档

calc() - CSS | MDN
flex - CSS | MDN

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。