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

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 >
      <div >
      </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>
    </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.

CodePudding user response：

its simple, make it like this

<body>
    <div>
        <div >
            <div >
            </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 ></div>

    </div>
</body>

CodePudding user response：

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 >
      <div >
      </div>
      <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 ></div>
    </div>
  </div>