Sticky Footer | Fluid Layout and Flexbox

A sticky footer is a website footer that remains fixed at the bottom of the viewport, even when the content above it doesn’t fill the entire screen. This ensures that the footer is always visible, regardless of the device or screen size.

Methods for Creating Sticky Footers

There are several approaches to creating sticky footers in responsive web design:

1. Using CSS

• Position absolute: Set the footer’s position to absolute and adjust its bottom property to 0.
• Calculate height: Use JavaScript to calculate the height of the content and set the footer’s height property accordingly.

Example:

HTML

<footer>

  This is the footer.

</footer>

CSS

footer {

  position: absolute;

  bottom: 0;

  width: 100%;

  height: 50px; /* Adjust the height as needed */

  background-color: #f0f0f0;

}

2. Using CSS Flexbox

• Set flex-grow to 1: Give the footer a flex-grow value of 1 to make it expand to fill the remaining space.
• Use a wrapper element: Wrap the content and footer in a container with display: flex; flex-direction: column;.

Example:

HTML

<div class=”container”>

  <main>

    </main>

  <footer>

    This is the footer.

  </footer>

</div>

CSS

.container {

  display: flex;

  flex-direction: column;

  min-height: 100vh; /* Ensure the container fills the viewport */

}

main {

  flex: 1 0 auto; /* Allow the main content to grow or shrink */

}

footer {

  flex-shrink: 0; /* Prevent the footer from shrinking */

}

3. Using CSS Grid Layout

• Define a grid container: Set the container’s display property to grid.
• Place the footer in the footer grid track: Use the grid-template-rows property to define the footer’s position.

Example:

HTML

<div class=”container”>

  <main>

    </main>

  <footer>

    This is the footer.

  </footer>

</div>

CSS

.container {

  display: grid;

  grid-template-rows: 1fr auto; /* 1fr for the main content, auto for the footer */

}

footer {

  /* Footer styles */

}

Choosing the Best Method

The best method for creating a sticky footer depends on your project’s specific requirements and your preference for CSS techniques. Consider the complexity of your layout, browser compatibility, and performance implications when making your decision.