如何使父级div滚动条忽略sticky定位的子元素？

直接用position: sticky没法让父元素滚动条忽略这个子元素——因为父元素的滚动范围是基于所有子元素的总高度计算的，sticky元素依然会被算进父元素的总高度里。要实现你要的效果，得调整结构，把可滚动内容和固定底部的内容分开：

修改后的代码： #

CSS

.parent {
  border: 1px solid green;
  max-height: 500px;
  position: relative; /* 为绝对定位的子元素提供参照 */
  overflow: hidden; /* 隐藏内部滚动容器的溢出部分，避免双重滚动条 */
}

.scroll-container {
  height: 100%;
  overflow-y: auto; /* 仅让这个容器负责滚动 */
}

.child1 {
  border: 1px solid darkgreen;
  height: 200px;
}
.child2 {
  border: 1px solid pink;
  height: 200px;
}
.child3 {
  border: 1px solid orange;
  height: 200px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* 撑满父元素宽度 */
  box-sizing: border-box; /* 把边框算进宽度，避免超出父元素 */
}

HTML

<div class="parent">
  <div class="scroll-container">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
  <div class="child3"></div>
</div>

原理说明： #

• 父元素设为position: relative，让child3的绝对定位以父元素为参照，固定在底部
• 把child1和child2放进单独的scroll-container，让这个容器负责滚动，高度设为100%后，它的滚动范围只包含内部两个子元素
• child3用绝对定位脱离文档流，不会被算进scroll-container的高度里，自然不会影响滚动范围，同时能固定在父元素底部不随滚动移动

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