Can't stick elements to the bottom of a page

Question

Please take a look at the demo code. When you scroll to the bottom, the stick to top element is always at the top, but the stick to bottom element does not stick to the bottom at all. Is there anything wrong?

<!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>

Thank you.

you might wanna check this https://stackoverflow.com/questions/55965662/if-you-specify-bottom-0-for-position-sticky-why-is-it-doing-something-diffe — Damzaky, Jan 17 '23 at 03:03
By default a flexbox container (your `.row`) is a 'row of columns' (`flex-direction: row`), but what you need is a 'column of rows' (`flex-direction: column`). I don't see the CSS defining that... — Rene van der Lende, Jan 17 '23 at 03:25

score 1 · Accepted Answer · answered Jan 17 '23 at 03:39

I recommend paying attention to this answer to a similar problem. In your case, accordingly, you can try to make the parent element as flex (.d-flex in Bootstrap), and for the stick element add margin-top: auto (.mt-auto in Bootstrap).

A modified example is below:

<!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 d-flex">
          <div class="col bg-warning mt-auto" 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>

Can't stick elements to the bottom of a page

1 Answers1