sticky bottom: 0 doesn't work, but top: 0 works

Question

html file

* {
  margin: 0px;
}

.header {
  background-color: tomato;
  height: 60px;
  position: sticky;
  top: 0;
}

.contents {
  height: 2500px;
}

.footer {
  position: sticky;
  bottom: 0;
  height: 65px;
  background-color: green;
}

<body>
  <div>
    <div class="contents">
      <div class="header">
      </div>
      1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>

      <div class="footer"></div>
    </div>
    <!--if footer is here, footer works-->
  </div>
</body>

I have two sticky elements the header and footer. footer doesn't work, but header works, even footer and header are in same element.(they are sibling). Only top: 0 works correctly, but bottom: 0 works incorrectly.

Put your footer outside the content div – Sfili_81 Dec 06 '22 at 08:52 — Sfili_81, Dec 06 '22 at 08:52
It works as is on Firefox and Chrome – julien.giband Dec 06 '22 at 08:53 — julien.giband, Dec 06 '22 at 08:53

score 0 · Answer 1 · answered Dec 06 '22 at 08:56

its simple, make it like this

<body>
    <div>
        <div class="contents">
            <div class="header">
            </div>
            1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>
        </div>
        <div class="footer"></div>

    </div>
</body>

score 0 · Accepted Answer · answered Dec 06 '22 at 09:20

You can use flexbox and wrap content between the header and footer and add flex: 1 to contain all remaining part

something like this:

* {
  margin: 0px;
}

.header {
  background-color: tomato;
  height: 60px;
  position: sticky;
  top: 0;
}

.contents {
  height: 2500px;
  display:flex;
  flex-direction:column;
  
}

.mainContent{
  flex:1;
}

.footer {
  position: sticky;
  bottom: 0;
  height: 65px;
  background-color: green;
}

   <div>
    <div class="contents">
      <div class="header">
      </div>
      <div class="mainContent">
      1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>

        </div>
      <div class="footer"></div>
    </div>
  </div>

sticky bottom: 0 doesn't work, but top: 0 works

2 Answers2