问题背景与分析
在网页设计中，我们经常需要创建具有固定定位（position: fixed）的元素，例如顶部导航栏、侧边栏或浮动工具箱。当这些元素需要从顶部向下偏移一定距离（例如，为了避开一个固定头部）时，一个常见的问题是：如何让这些元素的高度恰好占据屏幕的剩余空间，同时允许其内部内容滚动而不被底部截断？
许多开发者会尝试使用height: 100%或max-height: 100vh来解决这个问题，但往往发现它们并不能达到预期效果：
- height: 100%： 对于固定定位元素，其百分比高度是相对于其包含块（通常是初始包含块，即视口）计算的。然而，它并不会自动考虑元素自身top属性所占据的空间。这意味着，如果元素设置了top: 70px且height: 100%，它将尝试从视口顶部开始占据整个视口高度，其底部会超出视口，导致内容被截断。
- max-height: 100vh： 100vh代表视口（viewport）的完整高度。与height: 100%类似，如果元素设置了top: 70px，并将其最大高度限制为100vh，元素会从其top值（70px）处开始绘制，但其最大高度仍然是整个视口高度。这同样会导致元素底部超出视口，使得滚动条的末端和部分内容不可见。
考虑以下示例代码，它展示了这种问题：
<!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>
*, *::before, *::after {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
/* 模拟一个固定头部 */
div::before {
content: "";
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 70px; /* 头部高度 */
background-color: #222;
z-index: 2;
}
/* 存在问题的固定内容区域 */
div {
position: fixed;
top: 70px; /* 顶部偏移 */
left: 0;
width: 100%;
height: 100%; /* 或 max-height: 100vh; 这两种方式都无法正确工作 */
background-color: rgba(0, 0, 0, 0.9);
color: white;
padding: 30px;
overflow: auto; /* 期望内部滚动 */
z-index: 1;
}
div ul { list-style: none; }
div li { margin-bottom: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
div a { color: white; text-decoration: none; display: block; }
div a:hover { color: #00bcd4; }
</style>
</head>
<body>
<div>
<ul>
<li><a href="">Section #1</a></li>
<li><a href="">Section #2</a></li>
<li><a href="">Section #3</a></li>
<!-- 添加足够多的列表项以产生滚动 -->
<li><a href="">Page #1</a></li>
<li><a href="">Page #2</a></li>
<li><a href="">Page #3</a></li>
<li><a href="">Page #4</a></li>
<li><a href="">Page #5</a></li>
<li><a href="">Page #6</a></li>
<li><a href="">Additional Item #7</a></li>
<li><a href="">Additional Item #8</a></li>
<li><a href="">Additional Item #9</a></li>
<li><a href="">Additional Item #10</a></li>
<li><a href="">Additional Item #11</a></li>
<li><a href="">Additional Item #12</a></li>
<li><a href="">Additional Item #13</a></li>
<li><a href="">Additional Item #14</a></li>
<li><a href="">Additional Item #15</a></li>
<li><a href="">Additional Item #16</a></li>
<li><a href="">Additional Item #17</a></li>
<li><a href="">Additional Item #18</a></li>
<li><a href="">Additional Item #19</a></li>
<li><a href="">Additional Item #20</a></li>
</ul>
</div>
</body>
</html>运行上述代码，你会发现div中的滚动条无法滚动到底部，部分内容被视口截断。
解决方案：利用 calc() 函数
解决这个问题的关键在于使用CSS的calc()函数。calc()是一个强大的CSS函数，它允许我们在CSS属性值中执行基本的数学运算（加、减、乘、除）。这使得我们能够动态地计算元素的属性值，从而实现更灵活和精确的布局。
立即学习“前端免费学习笔记（深入）”；
为了让固定定位的div从其top值开始，一直延伸到视口底部，我们需要将其高度设置为视口总高度减去top值。
div {
top: 70px; /* 保持顶部偏移 */
/* 关键修正：使用 calc() 计算高度 */
height: calc(100vh - 70px);
/* 其他样式保持不变，例如 overflow: auto; */
}通过将height属性设置为calc(100vh - 70px)，我们明确地告诉浏览器：这个div的高度应该是整个视口高度（100vh）减去其顶部偏移量（70px）后的值。这样，无论视口高度如何变化，div都能精确地占据从top: 70px到视口底部的所有可用空间，并且其内部的滚动条也能完整显示，确保所有内容都可访问。
完整示例代码
以下是结合HTML和修正后的CSS的完整示例，展示了如何正确实现固定定位元素的高度自适应：
<!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>
/* 重置样式 */
*, *::before, *::after {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #f0f0f0;
}
/* 模拟固定头部 */
div::before {
content: "";
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 70px; /* 头部高度 */
background-color: #222;
z-index: 2;
}
/* 修正后的固定内容区域 */
div {
position: fixed;
top: 70px; /* 与头部高度一致的顶部偏移 */
left: 0;
width: 100%;
/* 关键修正：使用 calc() 计算高度 */
height: calc(100vh - 70px);
background-color: rgba(0, 0, 0, 0.9);
color: white;
padding: 30px;
overflow: auto; /* 允许内部滚动 */
z-index: 1; /* 确保在头部下方 */
}
div ul {
list-style: none;
}
div li {
margin-bottom: 10px;
padding: 5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
div a {
color: white;
text-decoration: none;
display: block;
}
div a:hover {
color: #00bcd4;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">Section #1</a></li>
<li><a href="">Section #2</a></li>
<li><a href="">Section #3</a></li>
<li><a href="">Page #1</a></li>
<li><a href="">Page #2</a></li>
<li><a href="">Page #3</a></li>
<li><a href="">Page #4</a></li>
<li><a href="">Page #5</a></li>
<li><a href="">Page #6</a></li>
<li><a href="">Additional Item #7</a></li>
<li><a href="">Additional Item #8</a></li>
<li><a href="">Additional Item #9</a></li>
<li><a href="">Additional Item #10</a></li>
<li><a href="">Additional Item #11</a></li>
<li><a href="">Additional Item #12</a></li>
<li><a href="">Additional Item #13</a></li>
<li><a href="">Additional Item #14</a></li>
<li><a href="">Additional Item #15</a></li>
<li><a href="">Additional Item #16</a></li>
<li><a href="">Additional Item #17</a></li>
<li><a href="">Additional Item #18</a></li>
<li><a href="">Additional Item #19</a></li>
<li><a href="">Additional Item #20</a></li>
</ul>
</div>
</body>
</html>注意事项与最佳实践
- top值的一致性： calc()函数中减去的值必须与元素的top属性值保持一致。如果top值是动态变化的（例如，在响应式设计中头部高度可能不同），则需要相应地更新calc()中的值。这可以通过CSS变量（var(--header-height)）结合JavaScript或媒体查询来实现。
- box-sizing: border-box;： 在本教程的示例中，我们使用了box-sizing: border-box;。这意味着padding和border会包含在元素的width和height之内。如果未使用此属性，并且元素有padding或border，则需要额外从calc()结果中减去这些
