How to keep footer at the bottom of the screen

html

responsive-design

css

web-development

byNikita Barsukov·Feb 19, 2025

In order to anchor your footer to the bottom of the screen, tech gurus recommend using CSS Flexbox. Here’s the secret sauce: apply display: flex; flex-direction: column; to the <body>, add flex: 1; to <main> to gobble up space, and finally margin-top: auto; to <footer> to nudge it right down. Here, check it out:

<!-- HTML Structure -->
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

/* CSS Rules */
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; }
main { flex: 1; } /* Stretch Armstrong rules! */
footer { margin-top: auto; } /* takes the lazy elevator down */

Hocus pocus with Flexbox to keep the footer obedient at the bottom on both short and long pages. Now, plan for a short screenplay with minimal content to ensure your footer's diva antics are kept in check.

Making it cross-browser compatible and responsive

Winning the web browser lottery

How do you have a peace pact for cross-browser compatibility with your footer that includes every opera singer (here's looking at you, Opera)? Testing, of course! Just in case Opera decides to go full diva, you can reel it in with this fix:

/* Opera Fix (if needed) */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    /* Opera trying to steal the show again, eh? I got tricks up my sleeve! */
}

Responsiveness is king

To avoid embarrassing footer slip-ups on different devices, media queries can be your knights in shining armor, ensuring the footer behaves like a perfect guest regardless of screen size.

/* CSS for Responsive Adjustments */
@media screen and (max-width: 768px) {
  footer { padding: 10px 0; } /* Because we are considerate for our mobile users 👌 */
  body, html { margin-bottom: 10px; } /* Ensuring visibility - Hide and Seek is for kids */
}

Overlapping isn't just rude in conversations

Now, content is king, and you wouldn't want your king to hide behind your footer, would you? So, a padding-bottom that suits your <main> content will save your day.

/* Prevent Main Content Overlap */
main { padding-bottom: 70px; /* King's court needs breathing space! */ }

Remember, if you choose to stick the footer at the bottom with position: fixed;, ensure the footer stretches out to 100% width like that yoga pose you can't quite master yet. Get your body’s margin to match the footer’s height. That'll keep any content overlap at bay.

Cash in on structured styling

A defined height gives your footer that high-end bespoke fit. Nothing less for our footer lord!

/* Defined Footer Height */
footer { height: 70px; line-height: 70px; /* I like 'em tall! */ }

Positioning is everything

A killer stance is what sets a supermodel apart. Your footer can join those ranks by being positioned to the left of the screen (left: 0;), holding the stage perfectly regardless of the screen width.

/* Footer Alignment */
footer { position: fixed; bottom: 0; width: 100%; left: 0; } /* Freeze! Vogue. */

explain-codes / Html / How to keep footer at the bottom of the screen

Linked

Stretch and scale CSS background



Is there a way to make HTML5 video fullscreen?



Switching the order of block elements with CSS



Css table-cell equal width



How to make a `` always full screen?



Text overflow ellipsis on two lines



Stretch background image CSS?



Making it cross-browser compatible and responsive Cash in on structured styling