布局挑战：固定页眉页脚与动态内容区
在网页设计中，我们经常遇到这样的布局需求：页面顶部有一个固定高度的导航栏或页眉，底部有一个固定高度的页脚，而中间的内容区域需要根据视口大小自适应地填充剩余的垂直空间。传统的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结构如下所示：
<header>页眉内容</header> <div class="chat"> <!-- 中间聊天窗口或主要内容 --> 这里的内容将填充所有剩余空间，即使内容不足以填满垂直空间，页脚也会始终保持在屏幕底部。 </div> <footer>页脚内容</footer>
整体CSS与HTML示例
结合以上步骤，一个完整的实现示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应垂直布局示例</title>
<style>
/* 通用样式重置 */
* {
box-sizing: border-box; /* 边框和内边距包含在元素的总宽度和高度内 */
padding: 0;
margin: 0;
/* border: 1px solid gray; /* 调试用，可移除 */ */
}
/* 定义CSS变量 */
:root {
--header-height: 3rem; /* 页眉高度 */
--footer-height: 5rem; /* 页脚高度 */
}
/* 页眉样式 */
header {
background-color: #f0f0f0;
height: var(--header-height);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #ccc;
}
/* 中间内容区域样式 */
.chat {
background-color: #e0f7fa;
min-height: calc(100vh - var(--header-height) - var(--footer-height));
overflow-y: auto; /* 如果内容溢出，允许垂直滚动 */
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: center; /* 示例：内容垂直居中 */
align-items: center; /* 示例：内容水平居中 */
text-align: center;
}
/* 页脚样式 */
footer {
background-color: #f0f0f0;
height: var(--footer-height);
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #ccc;
}
/* 示例：当内容足够多时 */
.long-content {
margin-top: 20px;
height: 120vh; /* 模拟内容超长 */
background-color: #fce4ec;
padding: 10px;
border-radius: 5px;
color: #d81b60;
}
</style>
</head>
<body>
<header>
<h1>顶部导航/页眉</h1>
</header>
<div class="chat">
<p>这是中间内容区域。它会自适应填充页眉和页脚之间的所有垂直空间。</p>
<p>即使内容不多，页脚也会“粘”在屏幕底部。</p>
<p>如果内容非常多，`min-height`允许它继续向下延伸，并且`.chat`区域会显示滚动条。</p>
<!-- 模拟长内容 -->
<!-- <div class="long-content">
<p>这里有很多内容，超出了视口高度，验证min-height的灵活性。</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p> 
