0

I want my footer to be pinned to the bottom of the screen but ONLY when there is not much content on the page. When the page has lots of content, I want the footer to just be after the content. I don't want it pinned to the bottom as it is larger in size. I am using bootstrap 4.6 but a vanilla CSS approach would be ok too. Thanks for any suggestions.

1 Answer 1

2

The key here is to use height, min-height Where the footer will be pushed automatically after the div height. And if it's overflown, min-height will expand with the content accordingly.

Doing the min-height work in JavaScript would be cleaner, but this is just using CSS.

This example shows non overflowing content:

* {
  margin: 0;
  padding: 0;
}

div {
  min-height: 80vh;
}

footer {
  color: white;
  background-color: black;
  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
<body>
  <div>
    Some Content
  </div>
  <footer>
    Random Footer
  </footer>
</body>

This example shows overflowing content:

* {
  margin: 0;
  padding: 0;
}

div {
  min-height: 80vh;
}

footer {
  color: white;
  background-color: black;
  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
<body>
  <div>
    <p>Random Content 1</p>
    <br />
    <p>Random Content 2</p>
    <br />
    <p>Random Content 3</p>
    <br />
    <p>Random Content 4</p>
    <br />
    <p>Random Content 5</p>
    <br />
    <p>Random Content 6</p>
    <br />
    <p>Random Content 7</p>
    <br />
    <p>Random Content 8</p>
    <br />
    <p>Random Content 9</p>
    <br />
    <p>Random Content 10</p>
    <br />
    <p>Random Content 11</p>
    <br />
    <p>Random Content 12</p>
    <br />
    <p>Random Content 13</p>
    <br />
  </div>
  <footer>
    Random Footer
  </footer>
</body>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.