使用position: sticky无法将元素固定至页面底部的问题求助

问题现象 #

滚动页面至底部时，Stick to top元素能正常固定在顶部，但Stick to bottom元素完全无法固定在底部。

原代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row" style="height: 2000px;">
        <div class="col bg-success">
          <div class="col bg-info" style="position: sticky; top: 0">
            Stick to top
          </div>
        </div>
        <div class="col bg-danger">
          <div class="col bg-warning" style="position: sticky; bottom: 0">
            Stick to bottom
          </div>
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

问题原因 #

sticky定位的核心是相对于父容器的滚动范围生效：

• 左侧的.col.bg-success父容器继承了row的height:2000px，拥有足够的垂直滚动空间，当页面滚动时，sticky元素能触发top:0的固定逻辑。
• 右侧的.col.bg-danger父容器高度仅由内部的sticky元素撑开，高度极小。当页面滚动到底部时，这个父容器也会跟着滚动到页面底部，没有多余的空间让sticky元素触发bottom:0的固定效果——它本来就贴在父容器底部，而父容器已经到了页面底部，自然看起来没有"固定"的效果。

解决方法 #

给右侧的父容器.col.bg-danger设置高度，让它和左侧容器一样拥有足够的垂直空间，比如继承row的高度：

修改后的关键代码片段：

<div class="col bg-danger" style="height: 100%">
  <div class="col bg-warning" style="position: sticky; bottom: 0">
    Stick to bottom
  </div>
</div>

完整修复后代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row" style="height: 2000px;">
        <div class="col bg-success">
          <div class="col bg-info" style="position: sticky; top: 0">
            Stick to top
          </div>
        </div>
        <div class="col bg-danger" style="height:100%">
          <div class="col bg-warning" style="position: sticky; bottom: 0">
            Stick to bottom
          </div>
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

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