问题描述
在网页布局中，我们经常会遇到需要创建固定定位（position: fixed）的元素，例如顶部导航栏或侧边栏。当这些固定元素占据了屏幕的一部分空间时，我们可能希望其下方的另一个内容区域div能够填充屏幕的剩余高度，并且当内容溢出时可以正常滚动。
然而，如果这个内容div也设置了position: fixed或position: absolute，并带有top属性来使其位于固定导航栏下方，例如top: 70px，同时尝试使用height: 100%或max-height: 100vh来使其填充高度，通常会遇到一个问题：100vh代表的是整个视口的高度，而不会自动减去top属性所占用的空间。这导致内容div的底部会超出视口，即使设置了overflow: auto，其滚动条的底部内容也可能无法完全显示。
考虑以下常见的HTML和CSS结构：
固定定位元素高度自适应
在此示例中，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代码，展示了如何正确实现这一布局：
固定定位元素高度自适应（解决方案）
注意事项与总结
- 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()函数，我们可以优雅地解决固定定位元素高度自适应的常见难题，构建出更健壮、更符合预期的网页布局。
