使用CSS实现滚动堆叠卡片时最后一张卡片高度溢出问题排查

问题原因 #

你用position: sticky实现滚动卡片堆叠时，最后一张卡片出现高度溢出，核心原因是：父容器的高度仅由每张卡片的100vh高度累加而成，但top:25px的设置让最后一张卡片在滚动到页面底部时，父容器没有预留足够空间支撑它保持完整的100vh高度，最终导致卡片被父容器底部挤压，出现高度异常。

解决方案 #

给每张卡片添加margin-bottom:25px（值与top属性一致），让父容器总高度包含卡片间的间隔，确保最后一张卡片滚动到底部时仍能以完整高度保持粘滞状态，同时堆叠效果也会更统一。

修正后的代码 #

CSS #

.card{
  height:100vh;
  width: 100%;
  position: sticky;
  top: 25px;
  color: white;
  text-align: center;
  font-size: 20px;
  margin-bottom: 25px;
}

.card:nth-child(even){
  background-color: blue;
}
.card:nth-child(odd){
  background-color: green;
}

HTML #

<div>
  <div class="card">Card One</div>
  <div class="card">Card Two</div>
  <div class="card">Card Three</div>
  <div class="card">Card Four</div>
  <div class="card">Card Five</div>
</div>

内容的提问来源于stack exchange，提问作者Bhavesh Kumar Sharma