Fix footer to bottom of page

html

responsive-design

flexbox

layout-consistency

byAlex Kataev·Feb 7, 2025

Stick that footer to the bottom using CSS Flexbox like superglue. Just ensure your .container is bedecked in display: flex;, flex-direction: column;, and min-height: 100vh;. The .footer just needs a bit of margin-top: auto; to get it sitting pretty at the bottom.

body {
  margin: 0; /* Let's start with a clean slate */
}

.container {
  display: flex; /* It's all a balancing act */
  flex-direction: column; /* One after the other, please */
  min-height: 100vh; /* At least as tall as our view, please */
}

.footer {
  margin-top: auto; /* Flexbox magic happening right here! */
}

HTML structure:

<div class="container">
  <!-- Your spectacular content here -->
  <footer class="footer">The lord of the bottom land</footer>
</div>

This approach assures our pal, the footer, maintains its grip on the bottom, no matter the device or content size.

Building flexibility and predictability

Using fixed positioning for sticky footers

Quick-fix alert, position: fixed; can give footers the stickiness of a well-chewed gum. It'll hang on to the underside of your screen with unyielding resolution.

.footer {
  position: fixed; /* Sticky like chewed gum */
  bottom: 0; /* Snuggled at the bottom */
  left: 0; /* Barred from straying left */
  right: 0; /* Nor right */
  height: 50px; /* Dress it up or down, your choice */
}

However, remember to give your <body> a bit of breathing space to ensure your compelling content doesn't get smothered by the footer.

Embracing responsive design

For when screen sizes love to play hide and seek, FlexBox helps maintain harmony in your layout. Use flex-grow on the .content to ensure the footer minds its manners when the content is lighter than a soda cracker.

.content {
  flex: 1 0 auto; /* And it just grows */
}

Packing for edge cases

With absolute positioning in layouts, you need a well-planned interior. A simple position: relative; tweak prevents the footer from indulging in any mischievous z-index wanderings.

Also, say hello to a little friend, the .footer-ghost. This unassuming friend mimics the footer's size and keeps it from rudely overlapping with content:

.footer-ghost {
  display: block;
  height: 50px; /* Keep it in step with the footer */
}

This shadowing act brings layout consistency without spooking the user experience

Accessibility and final touches

Ensuring adaptability to content

A webpage is a living, breathing entity. As it grows and evolves in content, you want your footer to adapt like a witty chameleon. A min-height: 100vh; on the container, coupled with a Flexbox layout, seeks to enhance the user experience.

Cross-browser compatibility

Every user is a VIP that needs the red carpet. Flexbox is your magic carpet here, transcending the browser barriers. Doing a verification run and throwing in vendor prefixes for added safety isn't a bad idea.

Layout testing

Before you paint the town red with your new webpage, test run different content lengths and screen resolutions. Wrap your layout in various conditions and scenarios to smooth out any unexpected surprises.

Visual examples

A picture is worth a thousand words, and a demo, a million. A platform like jsFiddle or CodePen could be your stage to demonstrate your solution, and silence the critics while winning fans.

explain-codes / Html / Fix footer to bottom of page

Linked

How to push a footer to the bottom of page when content is short or missing?



Twitter Bootstrap 3 Sticky Footer



Footer at bottom of page or content, whichever is lower



Make footer stick to bottom of page correctly



Bootstrap 3 Flush footer to bottom, not fixed

