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