如何使用position:sticky实现按钮始终固定在容器底部（兼容短内容）

DevOps 小满

2026-10-7

解决方案

你的问题核心在于右侧描述容器.pdp__desc的默认高度由内容撑开，sticky定位的元素只能在父容器的可视范围内移动，所以内容较短时按钮无法下沉到容器底部。仅需修改两处CSS即可实现需求，不需要调整HTML结构，也不需要JS：

调整.pdp__desc的布局规则，保证最小高度与左侧轮播区域对齐，同时采用弹性布局控制子元素位置
给按钮添加上外边距自动填充规则，让它在内容较短时自动沉到容器底部

修改后的CSS片段

.pdp__desc {
  grid-column: 10 / span 3;
  grid-row: 1;
  position: relative;
  /* 新增代码 start */
  min-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  /* 可根据实际设计需求调整内容之间的间距 */
  gap: 16px;
  /* 新增代码 end */
}

.btn {
  background: red;
  box-sizing: border-box;
  border: none;
  display: block;
  height: 48px;
  margin-bottom: 0;
  padding-top: 12px;
  position: sticky;
  bottom: 24px;
  text-align: center;
  /* 新增代码 start */
  margin-top: auto;
  /* 新增代码 end */
}