理解问题：固定定位元素的高度挑战
在网页布局中，我们经常会遇到需要将某个元素固定在屏幕的特定位置，例如作为页面的头部导航栏或侧边栏。当这些固定定位的元素（position: fixed）设置了top属性（例如top: 70px）来避开顶部固定区域时，如果该元素需要占据屏幕剩余的所有垂直空间并支持内部滚动，常规的高度设置方法往往会失效。
例如，一个常见的场景是，页面顶部有一个固定高度的头部（如70px），其下方有一个主要内容区域的div，该div也需要固定定位，并从头部下方开始，一直延伸到屏幕底部。如果为这个div设置height: 100%或max-height: 100vh，会发现当div内部内容过多需要滚动时，滚动条的底部内容会被截断，无法完全显示。
为什么会这样？
- position: fixed 的行为： 当元素被设置为 position: fixed 时，它会脱离正常的文档流，并相对于浏览器视口（viewport）进行定位。
- height: 100% 的局限： 对于 fixed 定位的元素，height: 100% 通常会相对于其初始包含块（即视口）计算。但当同时设置了 top 属性时，100% 的高度是从 top 偏移量开始计算的。这意味着如果 top: 70px，那么 height: 100% 实际上是从视口顶部 70px 处开始向下延伸 100% 的视口高度，这必然会导致元素底部超出视口。
- max-height: 100vh 的不足： 100vh 代表视口高度的100%。max-height: 100vh 同样是从视口顶部开始计算最大高度，它不会自动减去 top 属性所占用的空间。因此，元素底部依然会超出视口，导致内容被隐藏。
考虑以下HTML和CSS示例，它展示了上述问题：
固定定位Div高度问题
运行上述代码，你会发现当列表项足够多时，滚动到底部，最后几项内容会被屏幕底部裁剪掉，无法完全显示。
立即学习“前端免费学习笔记（深入）”；
calc() 函数：精准解决高度计算
CSS的calc()函数允许我们在CSS属性值中执行数学运算。这是解决上述高度计算问题的理想工具。
核心思想是：我们需要的div高度，应该是整个视口的高度（100vh）减去它距离视口顶部的偏移量（top属性的值）。
解决方案代码：
我们只需要修改主div的height属性，将其替换为calc()计算值：
/* 解决方案CSS */
div {
position: fixed; /* 保持固定定位 */
top: 70px; /* 保持顶部偏移 */
left: 0;
width: 100%;
height: calc(100vh - 70px); /* 关键：使用calc()精确计算剩余高度 */
background-color: rgba(0, 0, 0, 0.9);
padding: 30px;
overflow: auto; /* 允许内部滚动 */
color: white;
}
/* 其他样式保持不变 */
div::before {
content: "";
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 70px;
background-color: #222;
z-index: 2;
}将原始代码中的div样式替换为上述解决方案，问题即可解决。现在，无论内容有多少，div都将精确地占据从70px到屏幕底部的所有空间，并且内部滚动条将允许用户访问所有内容。
工作原理深度解析
- 100vh： 这是一个CSS单位，代表视口（viewport）高度的100%。例如，如果你的浏览器窗口高度是900px，那么100vh就等于900px。
- 70px： 这是我们为div设置的top偏移量，它告诉浏览器div的顶部应该距离视口顶部70像素。同时，这也是我们顶部固定头部的高度。
- calc(100vh - 70px)： 浏览器在渲染时会动态执行这个计算。它会获取当前的视口高度，然后减去70px。计算结果就是div实际应该占据的高度。这样，div的顶部正好位于70px处，底部则正好与视口底部对齐，完美填充了屏幕的剩余空间。
- overflow: auto： 结合这个属性，当div内部的内容高度超过calc()计算出的高度时，div内部会自动出现滚动条，确保所有内容都能被用户看到。
应用场景与注意事项
- 固定头部/底部布局： 这种方法是实现带有固定头部或底部（或两者都有）的页面布局中，主内容区域自适应高度并可滚动的标准实践。
- position 属性： 确保目标div具有position: fixed或position: absolute属性。calc()结合top属性主要应用于这些脱离文档流的定位方式。
-
box-sizing： 强烈建议在全局样式中设置box-sizing: border-box;。
*, *::before, *::after { box-sizing: border-box; }这样，div的padding和border都会被包含在height属性定义的总高度之内。如果使用默认的content-box，padding和border会额外增加元素的高度，可能导致再次溢出。
- top 值的一致性： calc()函数中的减数（例如70px）必须与div的top属性值保持一致。如果top值是动态变化的（例如通过JavaScript），那么calc()中的值也需要通过JavaScript动态更新。
- 浏览器兼容性： calc()函数在现代浏览器中得到了广泛支持（包括IE9及更高版本），因此兼容性通常不是问题。
- 多层固定元素： 如果有多个固定元素，例如顶部固定头部和底部固定脚部，可以进一步扩展calc()的使用：height: calc(100vh - top_height - bottom_height);。
总结
通过巧妙地运用CSS的calc()函数，我们可以精确地控制固定定位元素的高度，使其在设置了top偏移量后，依然能够完美地占据屏幕的剩余垂直空间。这种方法不仅解决了内容溢出被裁剪的问题，还提升了用户体验，并为复杂的页面布局提供了强大的灵活性和可维护性。掌握calc()函数是现代CSS布局中一项非常实用的技能。
