Responsive Footer That Stays At The Bottom Of The Page Properly

Tech

  • CSS

I have 3 requirements when it comes to footers:

  1. Footer must be responsive (thus dynamic height)
  2. When the page content is smaller than the viewport height, footer should be positioned at the bottom of the page
  3. If the page content is "tall" enough to require scrolling, footer should just stick to the bottom of the content (hence no "position: absolute;" shenanigans)

There's several ways to go about it. My preferred one is using the CSS Grid system. With it we can represent the webpage as one column that consists of 3 elements - header, content, footer. Header and footer are "auto" sized, so when they change height (due to responsivity) they will render correctly and not overlap the actual content of the webpage. Minimum height of 100% viewport height assures that the footer will stay atleast at the bottom of the visible viewport when content isn't long enough to fill the whole viewport vertically. You might need to tweak this based on your navbar height. Without further ado:

1body {
2    min-height: 100vh;
3    display: grid;
4    grid-template-rows: auto 1fr auto;
5}
6
7header {
8    min-height: 1rem;
9}
10
11footer {
12    min-height: 1rem;
13}

And here's the HTML:

1<body>
2    <header>Navbar</header>
3    <main>Page Content</main>
4    <footer>Footer</footer>
5</body>