如何构建灵活的三行网页布局：中间区域高度自适应

许多网页设计需要三行布局：头部、主体和底部。头部和底部高度通常固定或受限，而主体内容高度则根据内容多少动态变化。本文介绍如何构建自适应布局，使主体内容在内容较少时仅占据必要空间，内容较多时则可滚动显示并填满可用页面高度。

下图展示了理想布局和可能出现的问题：

中间内容少  | 中间内容多  | 错误布局  |
========== | ========== | ========== | 
---------- | ---------- | ---------- |
 头部      |  头部      |  头部      |
---------- | ---------- | ---------- |
 主体行1    |  主体行1  ^ |  主体行1    |
 主体行2    |  主体行2  | |  主体行2    |
---------- |  ...     | |            |
 底部      |  ...     v |            |
---------- | ---------- | ---------- |
           |  底部      |  底部      |
           | ---------- | ---------- |
========== | ========== | ========== |

实现自适应布局的方法取决于头部和底部容器高度是否固定。

方法一：头部和底部高度固定

如果头部和底部高度固定，可以使用max-height和calc()函数。max-height限制主体容器的最大高度，calc()计算剩余空间并分配给主体容器。

方法二：头部和底部高度不固定，但有最大高度限制

如果头部和底部高度不固定，但有最大高度限制，则Flex布局更灵活。Flex布局轻松控制容器内元素的排列和大小，使其适应不同内容高度。通过设置flex-grow属性，主体容器可根据内容自适应高度，内容超出时自动出现滚动条。

建议开发者参考相关文档深入学习calc()函数和Flex布局，选择最合适的方案。这两种方法都能有效解决标题中提出的问题，实现一个在不同内容高度下都表现良好的三行布局。