能否仅配置一次固定定位侧边栏的max-height以实现自适应滚动？

嘿，这个需求完全可以用纯CSS搞定，不用再靠JS反复计算max-height啦！给你分享两种实用的方案，都是浏览器原生支持的，性能还更好：

方案1：视口单位 + calc() 适配带间距的侧边栏 #

如果你的侧边栏和窗口边缘有固定间距（比如上下各留20px），直接用视口高度vh结合calc()就能精准控制最大高度：

#sidebar {
  position: fixed;
  top: 20px;
  right: 20px;
  /* 最大高度 = 整个窗口高度 - 上下间距总和 */
  max-height: calc(100vh - 40px);
  /* 内容超出时自动显示垂直滚动条 */
  overflow-y: auto;
  width: 280px; /* 按需设置侧边栏宽度 */
}

原理很简单：100vh就是当前浏览器窗口的总高度，减去侧边栏上下的间距总和，就能让它的最大高度刚好适配剩余的窗口空间。不管窗口怎么 resize，浏览器都会自动重新计算这个值，完全不需要JS触发。

方案2：利用fixed定位特性填满垂直空间 #

如果想让侧边栏从右上角一直延伸到右下角，完全贴合窗口边缘，那就更简单了——同时设置top和bottom属性：

#sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0; /* 同时设置top和bottom，让高度自动填满窗口垂直空间 */
  width: 280px;
  overflow-y: auto;
}

当position: fixed的元素同时指定了top和bottom，它的高度会自动拉伸到填满这两个值之间的空间。一旦侧边栏的内容高度超过窗口高度，overflow-y: auto就会自动触发滚动条，全程无需JS干预。

进阶：固定侧边栏头部，只滚动内容 #

如果你的侧边栏有固定头部（比如标题栏），可以嵌套一个容器来单独控制滚动区域，体验更友好：

#sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
}

#sidebar .sidebar-header {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 12px;
  border-bottom: 1px solid #eee;
}

#sidebar .sidebar-content {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  /* 抵消头部高度，避免内容被遮挡 */
  box-sizing: border-box;
}

这样侧边栏的头部会始终固定在顶部，只有下方的内容区域会滚动，用户体验更流畅。

这些方案都能完美替代你之前的JS逻辑，而且是浏览器原生处理，不会有JS触发的重绘延迟，稳定性也更高～

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