如何让sticky侧边栏滚动后贴合视口底部且保留文档流

问题场景 #

页面未滚动时，侧边栏能贴合页面底部，内容可正常滚动到底；但滚动后，侧边栏会偏离视口底部，偏移量等于导航栏高度加外边距。需要在不使用absolute/fixed定位、保留文档流的前提下，让滚动后的侧边栏也贴合视口底部。

解决方案代码 #

修改侧边栏的CSS定位与高度设置，通过sticky的top+bottom组合实现自适应：

CSS代码

html, body {
  height: 1200px;
  background: red;
  margin: 0;
}

header {
  height: 50px;
  background: blue;
}

.sidebar {
  background: green;
  position: sticky;
  top: 32px;
  bottom: 0; /* 强制侧边栏底部贴合视口 */
  margin-top: 32px;
  width: 200px;
  overflow-y: scroll;
  /* 初始状态最小高度，确保未滚动时从header下方延伸至视口底部 */
  min-height: calc(100vh - 50px - 32px);
}

HTML代码（保持不变）

<header>
   header
</header>

<div class="sidebar">
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
</div>

实现原理 #

1. 未滚动状态：margin-top:32px维持侧边栏与导航栏的间距，min-height计算值确保侧边栏刚好从导航栏下方延伸至视口底部，满足初始布局需求。
2. 滚动后状态：sticky定位触发时，top:32px固定侧边栏顶部与视口的间距，bottom:0强制侧边栏底部贴合视口，浏览器会自动调整侧边栏高度为100vh - 32px，完美填充视口剩余空间。
3. 全程保留侧边栏在文档流中，未使用禁用的定位方式，完全符合需求。

内容的提问来源于stack exchange，提问作者switz