三行布局，中间容器内容可多可少，如何让整体布局自适应高度？

自适应三行布局，中间内容高度任意

问题：

假设有一个三行布局，头尾容器高度自适应（有高度限制），如何让中间容器内容可多可少时，整个布局都能自适应变化高度？

答案：

有多种实现方式：

1. 头尾高度固定

使用 max-height 和 calc() 函数：

.container {
  max-height: 100vh;
}

.header, .footer {
  height: 20px;
}

2. 头尾高度不固定（有最大高度限制）

使用 flex 布局：

.container {
  display: flex;
  flex-direction: column;
  max-height: 400px;
}

.header, .footer {
  flex: 0 1 auto;
}

.content {
  flex: 1 1 auto;
}

更多布局思路参考张鑫旭大佬的小测试：[css基础测试7](https://html.com/tests/test_tongkao.php?id=7)。

相关文档：

• [calc() - css | mdn](https://developer.mozilla.org/zh-cn/docs/web/css/calc)
• [flex - css | mdn](https://developer.mozilla.org/zh-cn/docs/web/css/flexbox)

以上就是三行布局，中间容器内容可多可少，如何让整体布局自适应高度？的详细内容，更多请关注其它相关文章！