双网格列布局下实现CSS position:sticky内容结束时吸附底部的问题

你遇到的bottom: 0不生效的核心原因是：position: sticky的滚动活动范围仅局限于它的直接父容器的高度范围内，你之前未给两列的父容器设置统一等高的高度，短列的父容器高度和自身内容高度完全一致，没有多余空间供sticky元素移动，自然无法生效。

实现步骤 #

1. 布局结构调整
   使用flex布局作为外层容器，利用flex默认的align-items: stretch特性，让左右两个列容器的高度自动对齐到两列内容的最大高度，作为sticky元素的活动容器。

<div class="columns-wrapper">
  <div class="column">
    <div class="column-content">
      <!-- 左侧列内容 -->
    </div>
  </div>
  <div class="column">
    <div class="column-content">
      <!-- 右侧列内容 -->
    </div>
  </div>
</div>

2. 核心样式设置

/* 外层两列容器 */
.columns-wrapper {
  display: flex;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 100vh auto; /* 加足够的上下边距方便测试滚动效果 */
}
/* 单个列容器 */
.column {
  flex: 1;
  /* flex布局下会自动拉伸高度到和最长列等高 */
}
/* 列内容容器，sticky定位核心 */
.column-content {
  position: sticky;
  bottom: 0;
  /* 如果需要内容和视口底部保留间距，修改这里的数值即可 */
}

效果说明 #

• 滚动初始阶段，两列内容同步向下移动，顶部始终对齐
• 短列内容的底部接触到视口底部时，会自动吸附在底部保持不动
• 长列内容继续滚动，直到长列内容的底部也接触到视口底部后，两列同步继续向下滚动
  完全匹配你需要的交互效果。

注意事项 #

• 不要给.column设置overflow: hidden或自定义高度固定高度类会破坏flex拉伸属性的设置，否则会导致sticky定位失效
• 不要给.column-content设置height: 100%，否则内容高度会和列容器高度一致，无法触发粘滞效果
  内容的提问来源于stack exchange，提问作者bezkitu