Keeping header at top and footer at bottom is a common practice for almost all websites. Sometimes, if content is small and screen is big then the footer comes up to the middle of the page. That’s really not a good way to handle footer.
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section.
I will explain few ways to keep or stick the footer to the bottom of the page if there is not enough content.
Three ways to stick footer to the bottom.
1. CSS Flexbox
This is the easiest method I know so far and I currently use it in my projects. We just have to add 3 lines of style to the layout element and one line of style to the layout’s child content or wrapper element.
The HTML part
<body>
<header class="header">
<h2>Header</h2>
</header>
<div class="wrapper">
<h2>Content wrapper</h2>
</div>
<footer class="footer">
<h2>Footer</h2>
</footer>
</body>The CSS part
body{
text-align:center;
// Line 1
display:flex;
// Line 2
flex-direction:column;
// Line 3
min-height:100vh;
}
.wrapper{
// Line 4
flex:1;
}In the above CSS, we need to make our elements flow in the column direction, in a simple verticle direction. For the wrapper child, we just need to add flex:1; property. It’s simple right.
Find the Codepen for Flexbox version.
See the Pen Stick Footer to bottom of page Flexbox by KiranWorkspace (@kiranworkspace) on CodePen.
2. CSS Grid
The grid method is even more simple compared to flexbox. Here we just need to modify the main layout element. This requires just 3 lines of code.
The CSS part
body{ // parent of Header, content & footer.
text-align:center;
display:grid; // Line 1
grid-template-rows: auto 1fr auto; // Line 2
min-height:100vh; // Line 3
}To understand better the above CSS code, we are applying fr (Fractional unit) for wrapper element to be flexible. We had Header, Wrapper, and Footer, hence grid-template-rows: auto 1fr auto. If it’s just 2 elements like Wrapper and Footer then the grid-template-rows value will be 1fr auto.
Codepen for above Grid version
See the Pen Stick Footer to bottom of page Grid by KiranWorkspace (@kiranworkspace) on CodePen.
3. JavaScript Version
JavaScript was my first option to keep footer at bottom, earlier I did not know much about Flexbox, so I used JavaScript to tackle this problem.
This method is a bit slower compared to the other two. Here I have to note down the height of the footer after loaded. Then I would set body padding-bottom to footer height which I got from javascript. Well, it’s confusing I know. Just have a look at the code snippet below.
Javascript Code
document.addEventListener('DOMContentLoaded', function () {
let footerheight = document.querySelector("footer").offsetHeight;
document.querySelector("body").style.paddingBottom = footerheight;
});Jquery
$(document).ready(function () {
let footerheight = $("#footer").height();
$("body").css({
"padding-bottom": footerheight,
});
});I personally do not recommend using JavaScript to stick footer at bottom of page. As we know flexbox and grid are the easier ways.
There are many other ways but more complicated, above three methods are the best from my perspective.
Hope you learnt few things from this article. Thank you.
