
jQuery Countdown Timer
September 11, 2024
Circled Highlight Text Effect
October 12, 2024
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 todisplay: flex
and usesflex-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 hasflex-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.