How to stick footer to bottom of page if not enough content

/ December 29, 2020 / Front-End
How to stick footer to bottom of page if not enough content

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. Using CSS flexbox
  2. Using CSS Grid
  3. Using Javascript

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.


Related Post

How to make Ellipsis to multiline text in CSS
Showing 1 or 2 lines of the title looks good on designs like card or excerpt, also important to handle…

CSS, Front-End / December 31, 2020

SASS Architecture
It is always a good idea to keep things organized. It could be your room, bookshelf, computer, table, work, codebase,…

Front-End, SASS / August 31, 2020

Categories

Kiran Acharya

Kiran Acharya

Front-End Developer

Bengaluru, Karnataka, India