如何设置CSS使.results div固定在可滚动.list同级元素底部实现粘性效果

解决方案 #

你要实现.results固定在滚动容器底部，用position: sticky是最优方案，不需要修改DOM结构，只要调整几个CSS属性即可：

1. 修正滚动容器的滚动属性

你当前.menu__content只设置了横向滚动，实际需要垂直滚动，修改对应属性：

.menu__content {
  max-height: 300px;
  min-width: 410px;
  /* 垂直方向内容溢出时滚动，水平方向隐藏溢出 */
  overflow-y: auto;
  overflow-x: hidden;
}

2. 给.results设置粘性定位

.results {
  /* 相对于最近的滚动祖先元素（也就是.menu__content）定位 */
  position: sticky;
  /* 距离滚动容器底部0的位置粘住 */
  bottom: 0;
  /* 必须设置背景色，否则滚动时上层内容会透过来 */
  background-color: #ffffff;
  /* 可选：添加边框、内边距优化视觉效果 */
  padding: 8px 12px;
  border-top: 1px solid #eee;
}

注意事项 #

• 不需要修改现有的DOM结构，.card的height: auto属性不需要调整，它会自动被内部的.list和.results撑开高度，给sticky定位提供足够的滚动空间
• 如果测试后发现不生效，检查.results的所有祖先元素是否有设置overflow: hidden，如果有的话移除即可，sticky定位的元素要求祖先元素不能有除了可见之外的overflow属性，除非这个祖先就是滚动容器本身

修改后完整可运行示例 #

<div class="menu__content" style="max-height: 100px; min-width: 410px; overflow-y: auto; overflow-x: hidden;">
    <div class="card" style="height: auto;">
    <div class="list">
    <div>
   <a class="list__tile list__tile--link">
      <div>
         <div>
            <div>a</div>
            <div>a</div>
         </div>
      </div>
   </a>
</div>
<div>
   <a>
      <div>
         <div>
            <div>b</div>
            <div>b</div>
         </div>
      </div>
   </a>
</div>
<div>
   <a>
      <div>
         <div>
            <div>c</div>
            <div>c</div>
         </div>
      </div>
   </a>
</div>
<div>
   <a>
      <div>
         <div>
            <div>d</div>
            <div>d</div>
         </div>
      </div>
   </a>
</div>
</div>
<div class="results" style="position: sticky; bottom: 0; background: #fff;">
   <a>
   <div>
      <div>
         <div>6 results</div>
      </div>
   </div>
</div>

内容的提问来源于stack exchange，提问作者Polina F.