如何在pitem内容滚动时将内容更少的aside div固定在父容器底部

问题原因 #

1. bottom属性仅对position值为非static的元素生效，你当前的.aside为默认static定位，所以配置的bottom: 0直接被浏览器忽略。
2. 你的需求是「aside内容完全展示后才固定在底部」，不属于fixed固定定位的适用场景，fixed会让元素直接脱离文档流，一开始就固定在视口底部，无法实现先随页面滚动、全部展示后再固定的效果。

解决方案 #

使用position: sticky实现该效果，它的特性是元素在滚动到阈值位置前保持正常文档流布局，到达阈值后自动粘滞固定，完全匹配你的需求。

完整CSS代码示例

上下单列布局场景

.container {
  width: 100%;
  /* 无需额外设置高度，由内容自然撑开即可 */
}

.pitem {
  display: grid;
  /* 保留你原有grid相关的配置即可 */
}

.aside {
  margin: 0;
  position: sticky;
  bottom: 0;
  /* 可选：添加背景色避免和pitem滚动的内容重叠时看不清 */
  background: #ffffff;
}

左右两列布局场景

如果你的两个子元素是左右排列的布局，额外调整父容器配置即可：

.container {
  display: flex;
  align-items: flex-start;
  gap: 20px; /* 自定义两列间距 */
}

.pitem {
  display: grid;
  flex: 1; /* 占满除aside外的剩余宽度 */
}

.aside {
  width: 300px; /* 自定义侧边栏宽度 */
  position: sticky;
  bottom: 0;
  align-self: flex-end; /* 关键：让aside对齐父容器底部，实现内容展示完后粘滞 */
  background: #ffffff;
}

注意事项 #

• 不要给父容器.container设置overflow: auto/overflow: hidden属性，会导致sticky定位失效
• 该方案兼容所有主流现代浏览器，无需额外添加属性前缀

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