一个常被忽视的 CSS 细节：当使用 position: sticky 时，虽然元素会在视口内“吸附”，但它本质上仍然是文档流中的块级元素——换句话说，它的高度会如实参与父容器的高度计算。这常常引发一个令人头疼的问题：父容器被撑大。特别是当父容器本身拥有固定尺寸（比如示例中的 .bg-red-500.h-[1200px]），且页面底部紧挨着 footer 时，这种撑开效应要么导致布局错位，要么直接造成内容溢出。
更棘手的是，纯 CSS 目前无法实现“当 sticky 元素即将触达 footer 时自动停止”的效果。因为 sticky 的行为只与滚动容器的边界有关，根本不会感知后面还存在着兄弟元素。因此，需要借助 JavaScript 来兜底处理。
核心思路：借助负外边距抵消高度影响
原理非常直接：获取 sticky 元素在屏幕上实际渲染出的高度（包括 margin-top 等偏移），然后将这个值设置为它的 margin-bottom 负值。这样一来，它在文档流中占用的位置就被抵消掉了，父容器自然就不会被撑开。一正一负，恰好平衡。
Div 1
Div 2 (sticky)
Div 3 (content)
以下是几个关键细节：
- 使用
getBoundingClientRect()获取到的才是真实渲染高度（它会考虑 padding 和 border），比offsetHeight或clientHeight更加准确； - 显式将
marginTop计入计算，避免顶部偏移残留； - 用
document.querySelector替代getElementsByClassName[0]，选择器的容错性和可读性都会更好； - 如果 sticky 元素的高度会动态变化（比如响应式布局中发生折行），就需要搭配
ResizeObserver进行重新计算；
从实际开发角度看，有几点需要特别注意：
- 此方法仅适用于 sticky 元素内部无需滚动的场景——案例中已经明确了这个约束；
- 将
margin-bottom设置为负值不会影响 sticky 的吸附行为，它只负责修改文档流中的占位； - 切勿将这段逻辑应用于整个
body或根容器，作用域一定要限定在具体的 sticky 容器层级内；
采用这个轻量级的脚本进行补偿，你就不需要引入复杂的定位逻辑，也不会打乱已有的布局结构。sticky 元素能够自然地在 footer 前停止，既保持了语义的清晰，也让样式更加稳定。
