布局挑战：固定页眉页脚与动态内容区
在网页设计中，我们经常遇到这样的布局需求：页面顶部有一个固定高度的导航栏或页眉，底部有一个固定高度的页脚，而中间的内容区域需要根据视口大小自适应地填充剩余的垂直空间。传统的height: 100%或height: 100vh可能无法直接满足这种需求，因为它们通常不考虑页眉和页脚占据的高度，容易导致内容溢出或布局不协调。
核心解决方案：CSS变量、min-height与calc()
为了优雅地解决这一问题，我们可以采用CSS自定义属性（变量）、min-height属性和calc()函数相结合的方法。这种方法不仅能够精确计算出中间内容区域的所需高度，还提供了良好的可维护性和灵活性。
1. 定义CSS自定义属性（变量）
首先，我们可以在:root选择器中定义CSS自定义属性，用于存储页眉和页脚的固定高度。这样做的好处是，当页眉或页脚的高度需要调整时，只需修改一处变量定义即可，无需在多处修改样式。
:root {
--header-height: 2rem; /* 定义页眉高度 */
--footer-height: 4rem; /* 定义页脚高度 */
}2. 设置页眉和页脚的高度
接下来，为页眉（header）和页脚（footer）元素应用它们各自的高度变量。
header {
background-color: magenta; /* 示例背景色 */
height: var(--header-height); /* 应用页眉高度 */
}
footer {
background-color: green; /* 示例背景色 */
height: var(--footer-height); /* 应用页脚高度 */
}3. 计算中间内容区域的高度
关键在于中间内容区域（例如.chat div）的样式。我们使用min-height属性结合calc()函数来动态计算其最小高度。calc(100vh - var(--header-height) - var(--footer-height))表示从整个视口高度（100vh）中减去页眉和页脚的高度。
立即学习“前端免费学习笔记（深入）”；
.chat {
background-color: aqua; /* 示例背景色 */
min-height: calc(100vh - var(--header-height) - var(--footer-height));
}4. HTML结构示例
相应的HTML结构如下所示：
页眉内容 这里的内容将填充所有剩余空间，即使内容不足以填满垂直空间，页脚也会始终保持在屏幕底部。
整体CSS与HTML示例
结合以上步骤，一个完整的实现示例如下：
自适应垂直布局示例
顶部导航/页眉
这是中间内容区域。它会自适应填充页眉和页脚之间的所有垂直空间。
即使内容不多，页脚也会“粘”在屏幕底部。
如果内容非常多，`min-height`允许它继续向下延伸，并且`.chat`区域会显示滚动条。
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
