CSS两列高度不同实现：短列滚到底部后固定，仅长列滚动

要解决短列下方出现空白、滚动到短列底部后让它固定的问题，直接用CSS的position: sticky就能搞定，不需要复杂的JS，修改后的代码如下：

最终代码 #

HTML（和你原来的一致，无需修改）

<div class="item-wrapper">
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.item-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.item {
  width: 47.5%;
}

.item:first-child {
  background-color: red;
  height: 120vh;
  /* 核心设置：滚动到元素底部接触视口底部时固定 */
  position: sticky;
  bottom: 0;
  /* 可选：防止长列滚动时覆盖短列 */
  z-index: 1;
}

.item:last-child {
  background-color: blue;
  height: 300vh;
}

关键说明 #

• position: sticky是混合定位方式：页面滚动初期短列会随页面正常滚动，直到它的底部触及视口底部后，就会固定在该位置，仅长列继续滚动。
• 父容器item-wrapper默认的overflow: visible是sticky生效的前提，不要给父容器加overflow: hidden/auto这类属性，否则sticky会失效。
• 加z-index: 1是为了避免长列滚动时覆盖短列，保证短列始终处于视觉上层。

如果需要短列滚动到视口顶部就固定（一直贴在页面顶部），只需把bottom: 0换成top: 0即可，按需调整。

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