如何用CSS实现水平滚动容器底部的sticky粘性固定页脚

核心修改说明 #

• 给.footer添加left: 0属性：sticky定位需要同时指定水平方向的偏移值，才能保证水平滚动时页脚始终固定在滚动容器左侧
• 给.footer设置宽度和滚动父容器一致，可直接写固定值width: 200px，也可设为width: inherit继承父容器宽度，适配父容器宽度动态变化的场景
• 给.footer添加display: flex; justify-content: center实现内部内容水平居中，支持嵌套任意类型的元素
• 删除不生效的justify-self: center属性：该属性仅对grid布局的子元素生效，flex布局下无效

完整可运行代码 #

CSS代码 #

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.example {
  width: 200px;
  overflow-x: auto;
}

.container {
  position: relative;
  display: flex;
  width: 400px;
  height: 100px;
  background-color: moccasin;
}

.footer {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 200px;
  display: flex;
  justify-content: center;
  background-color: palegreen;
}

HTML代码 #

<div class="example">
  <div class="container">
    <div class="footer">
      Footer
    </div>
  </div>
</div>

效果验证 #

• 页脚始终对齐容器底部，高度会随内部内容多少自动调整
• 向右滚动容器时，页脚位置保持固定，宽度始终和滚动父容器（.example）一致
• 页脚内部可任意放置按钮、图片、多行文本等元素，均会自动水平居中

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