jQuery Countdown Timer
jQuery Countdown Timer
September 11, 2024
Circled Highlight Text Effect
Circled Highlight Text Effect
October 12, 2024

September 13, 2024

Sticky Footer with Flexbox

A sticky footer ensures that the footer stays at the bottom of the page, even if the content is minimal and doesn’t fill the entire viewport. Using Flexbox is one of the simplest and most efficient ways to create this layout.

HTML Structure

<header id="header">
  <p>Header</p>
</header>

<main>
  <p>Content</p>
</main>

<footer>
  <p>Footer</p>
</footer>

Applying Flexbox to the Layout

Flexbox helps align items inside a container, making it perfect for managing a sticky footer layout. Here’s how to style it:

/* ---------------------------- */
/*    Snippflow Sticky Footer   */
/* ---------------------------- */

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

main {
  flex-grow: 1;
}

Key Concepts

  • Flexbox Layout: The body element is set to display: flex and uses flex-direction: column to stack the elements vertically.
  • Full-Height Body: The min-height: 100vh ensures the body takes up the full viewport height, regardless of content length.
  • Expandable Main Content: The main section has flex-grow: 1, which allows it to expand and fill the available space, pushing the footer down.

See the Pen Sticky Footer with Flexbox by Snippflow (@snippflow) on CodePen.

Summary

With just a few lines of CSS using Flexbox, you can create a simple and responsive sticky footer. This method is efficient, ensures the footer stays at the bottom of the page, and adapts to different screen sizes.

Leave a Reply

Your email address will not be published. Required fields are marked *

Level Up Your Coding Skills

Get the best CSS, HTML, and JS snippets delivered to your inbox monthly. 🚀
No spam—just coding gold! 💻✨"

We don’t spam! Read our privacy policy for more info.

cookie
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more