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

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《三行布局，中间容器内容可多可少，如何让整体布局自适应高度？》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

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

问题：

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

答案：

有多种实现方式：

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)

今天关于《三行布局，中间容器内容可多可少，如何让整体布局自适应高度？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！