问题描述
在网页布局中，我们经常会遇到需要创建固定定位（position: fixed）的元素，例如顶部导航栏或侧边栏。当这些固定元素占据了屏幕的一部分空间时，我们可能希望其下方的另一个内容区域div能够填充屏幕的剩余高度，并且当内容溢出时可以正常滚动。
然而，如果这个内容div也设置了position: fixed或position: absolute，并带有top属性来使其位于固定导航栏下方，例如top: 70px，同时尝试使用height: 100%或max-height: 100vh来使其填充高度，通常会遇到一个问题：100vh代表的是整个视口的高度，而不会自动减去top属性所占用的空间。这导致内容div的底部会超出视口，即使设置了overflow: auto，其滚动条的底部内容也可能无法完全显示。
考虑以下常见的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;
}
/* 模拟固定顶部导航栏 */
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);
padding: 30px;
overflow: auto; /* 允许滚动 */
color: white;
}
ul {
list-style: none;
}
li {
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
a {
color: inherit;
text-decoration: none;
}
</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="">Page #7</a></li>
<li><a href="">Page #8</a></li>
<li><a href="">Page #9</a></li>
<li><a href="">Page #10</a></li>
<li><a href="">Page #11</a></li>
<li><a href="">Page #12</a></li>
<li><a href="">Page #13</a></li>
<li><a href="">Page #14</a></li>
<li><a href="">Page #15</a></li>
<li><a href="">Page #16</a></li>
<li><a href="">Page #17</a></li>
<li><a href="">Page #18</a></li>
<li><a href="">Page #19</a></li>
<li><a href="">Page #20</a></li>
</ul>
</div>
</body>
</html>在此示例中，div元素虽然设置了top: 70px和height: 100%（或max-height: 100vh），但其高度仍然从视口顶部开始计算，导致其底部超出屏幕70px，使得滚动内容无法完全展示。
解决方案：使用calc()函数动态计算高度
解决这个问题的关键在于，我们需要精确地告诉浏览器，内容div的高度应该是整个视口的高度减去其top偏移量。CSS的calc()函数正是为此类动态计算而设计的。
通过将height属性设置为calc(100vh - [top_value])，我们可以确保div的高度正好填充从其top位置到视口底部的所有可用空间。
将上述CSS中的div样式修改如下：
div {
position: fixed;
top: 70px; /* 位于导航栏下方 */
left: 0;
width: 100%;
/* 关键修改：使用 calc() 函数计算高度 */
height: calc(100vh - 70px);
background-color: rgba(0, 0, 0, 0.9);
padding: 30px;
overflow: auto; /* 允许滚动 */
color: white;
}通过这一简单的修改，内容div的高度将变为视口高度 - 70px。这样，它将从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;
}
/* 模拟固定顶部导航栏 */
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);
padding: 30px;
overflow: auto; /* 允许滚动 */
color: white;
z-index: 1; /* 确保在导航栏下方 */
}
ul {
list-style: none;
}
li {
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
a {
color: inherit;
text-decoration: none;
}
</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="">Page #7</a></li>
<li><a href="">Page #8</a></li>
<li><a href="">Page #9</a></li>
<li><a href="">Page #10</a></li>
<li><a href="">Page #11</a></li>
<li><a href="">Page #12</a></li>
<li><a href="">Page #13</a></li>
<li><a href="">Page #14</a></li>
<li><a href="">Page #15</a></li>
<li><a href="">Page #16</a></li>
<li><a href="">Page #17</a></li>
<li><a href="">Page #18</a></li>
<li><a href="">Page #19</a></li>
<li><a href="">Page #20</a></li>
</ul>
</div>
</body>
</html>注意事项与总结
- calc()的灵活性： calc()函数不仅可以用于height，还可以用于width、padding、margin等多种CSS属性，支持加减乘除运算，并且可以混合使用不同单位（如px、%、em、vh、vw等），这使得它在响应式布局和复杂布局中非常有用。
- 单位一致性： 在calc()表达式中，进行加减运算时，确保操作数的单位是兼容的。例如，100vh - 70px是有效的，因为vh和px都是长度单位。但100% - 70px在某些上下文中可能需要注意其百分比的基准。
- 浏览器兼容性： calc()函数在现代浏览器中得到了广泛支持，可以放心使用。
- position: fixed与position: absolute： 这种calc()方法同样适用于position: absolute的元素，只要其父容器的高度是明确的，并且top属性是相对于该父容器的。
- max-height与height： 在本场景中，如果目标是让元素 始终 填充剩余空间并提供滚动，height: calc(...)是更直接和有效的选择。如果内容较短时，不希望元素拉伸到全高，而只在内容溢出时才限制高度，那么可以考虑max-height: calc(...)，但通常情况下，height会提供更一致的布局表现。
通过采用calc()函数，我们可以优雅地解决固定定位元素高度自适应的常见难题，构建出更健壮、更符合预期的网页布局。
