问题背景与分析
在网页设计中，我们经常需要创建具有固定定位（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）处开始绘制，但其最大高度仍然是整个视口高度。这同样会导致元素底部超出视口，使得滚动条的末端和部分内容不可见。
考虑以下示例代码，它展示了这种问题：
固定定位元素高度问题示例
- Section #1
- Section #2
- Section #3
- Page #1
- Page #2
- Page #3
- Page #4
- Page #5
- Page #6
- Additional Item #7
- Additional Item #8
- Additional Item #9
- Additional Item #10
- Additional Item #11
- Additional Item #12
- Additional Item #13
- Additional Item #14
- Additional Item #15
- Additional Item #16
- Additional Item #17
- Additional Item #18
- Additional Item #19
- Additional Item #20
运行上述代码，你会发现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的完整示例，展示了如何正确实现固定定位元素的高度自适应：
固定定位元素高度自适应解决方案
- Section #1
- Section #2
- Section #3
- Page #1
- Page #2
- Page #3
- Page #4
- Page #5
- Page #6
- Additional Item #7
- Additional Item #8
- Additional Item #9
- Additional Item #10
- Additional Item #11
- Additional Item #12
- Additional Item #13
- Additional Item #14
- Additional Item #15
- Additional Item #16
- Additional Item #17
- Additional Item #18
- Additional Item #19
- Additional Item #20
注意事项与最佳实践
- 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()结果中减去这些
