Sticky Footers: Keeping Your Footer at the Bottom of the Page

In web design, a common challenge is keeping the footer at the bottom of the page, especially when the content is shorter than the viewport height. This tutorial will explore various techniques to achieve a sticky footer that stays at the bottom of the page without overlapping the content.

Understanding the Problem

Before diving into the solutions, it’s essential to understand the problem. When the content is shorter than the viewport height, the footer tends to move up and leave a gap between the content and the bottom of the page. To fix this, we need to ensure that the content area takes up the remaining space, pushing the footer down to the bottom.

Method 1: Flexbox

One popular solution is to use flexbox. By setting the display property to flex and flex-direction to column on the container element (in this case, the body), we can make the content area take up the remaining space.

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

Method 2: Grid

Another solution is to use CSS grid. By setting the display property to grid and defining a grid template with three rows (header, content, and footer), we can achieve a similar effect.

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  min-height: 50px;
  background: lightcyan;
}

footer {
  min-height: 50px;
  background: PapayaWhip;
}

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

Method 3: Absolute Positioning

A third solution is to use absolute positioning on the footer. By setting the position property to absolute and bottom to 0, we can position the footer at the bottom of the page.

body {
  min-height: 100vh;
  margin: 0;
  position: relative;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}

<header>Header</header>
<article>Content</article>
<footer>Footer</footer>

Method 4: Table Layout

A fourth solution is to use a table layout. By setting the display property to table on the container element and defining table rows for the header, content, and footer, we can achieve a similar effect.

body {
  min-height: 100vh;
  margin: 0;
  display: table;
  width: 100%;
}

header {
  height: 50px;
  background: lightcyan;
}

main {
  height: 1%;
}

footer {
  height: 50px;
  background: PapayaWhip;
}

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

Method 5: Calc

A fifth solution is to use the calc function to set the minimum height of the content area. By subtracting the footer height from the viewport height, we can ensure that the content area takes up the remaining space.

.allButFooter {
  min-height: calc(100vh - 40px);
}

<div class="allButFooter">
  <!-- Your page's content goes here, including header, nav, aside, everything -->
</div>
<footer>Footer</footer>

Conclusion

In conclusion, there are several techniques to keep your footer at the bottom of the page. Flexbox, grid, absolute positioning, table layout, and calc are all viable solutions. The choice of technique depends on your specific use case and personal preference. By understanding these techniques, you can create a sticky footer that stays at the bottom of the page without overlapping the content.