I want my footer to be at the bottom of the page, even when there are not enough elements on the page to push it down. I tried position: fixed with a bottom: 0 but that makes it stay there when there are elements filling the page.
How can I make the footer be at the bottom of all the elements when the page is full and at the bottom of the screen when the page is not?
0
You can make clone as placeholder
like:
<footer>
<div class="plaholder"></div>
<div class="onscreenfooter"></div>
</footer>
<style>
.plaholder
{
width: 100%;
// height fixed by js
}
.onscreenfooter
{
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style>
Make onscreenfooter fixed position
and copy its height to placeholder
clientHeight includes padding.
var clientHeight = document.querySelector('.onscreenfooter').clientHeight;
document.querySelector('.plaholder').style.height = clientHeight;
or
offsetHeight includes padding, scrollBar and borders.
var offsetHeight = document.querySelector('.onscreenfooter').offsetHeight;
document.querySelector('.plaholder').style.height = offsetHeight;
make a div between your nav and footer and then set the height of div to 100vh or screen so it work.
CSS
.main-content {
height: 100vh;
}
HTML
<nav></nav>
<div class="main-content">
<h1>Welcome to my website!</h1>
<p>This is some sample content.</p>
</div>
<footer></footer>
“100vh” is the full height of screen
Hussnain Iftikhar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.