Member Avatar for Alexii

I'm trying to get my footer to stick at the bottom of my page, but it is proving very difficult. I have read all the tutorials with CSS, but I keep on messing it up somehow. Please help :)

  • 3 Contributors
  • 3 Replies
  • 119 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

A short, practical summary that builds on what and said and gives a reliable modern solution.

A robust, widely supported pattern is to make the page a column flex container so the main content stretches and the footer stays at the bottom when content is short, but naturally moves below the content when the page is long. This avoids fixed positioning and overlap issues.

Example layout (skeleton):

<!-- HTML -->
<body>
  <div class="site">
    <main class="content">…</main>
    <footer class="site-footer">Footer</footer>
  </div>
</body>
/* CSS */
html, body { height: 100%; margin: 0; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.content { flex: 1 0 auto; }
.site-footer { /* normal flow: no position needed */ }

Notes and troubleshooting:

  • Test mobile browsers: 100vh can behave oddly when the browser chrome hides/shows; see the CSS-Tricks discussion on viewport units for details.
  • If using a fixed footer (as demonstrated), always add equivalent padding-bottom to the content so nothing is hidden behind the footer.
  • Ensure html, body have zero margins and appropriate height (or use min-height:100vh) so the flex approach works.
  • Flexbox and grid solutions are supported by modern browsers; for legacy environments you may need a simple JavaScript fallback or the older absolute-position + padding technique.

Further reading: MDN’s Flexbox layout guide and CSS-Tricks’ sticky-footer notes are good, practical references.

Recommended Answers

All 3 Replies

Member Avatar for MidiMagic

It can't be done in a way that works on all computers, browsers, screen resolutions, aspect ratios, numbers of extra toolbars installed, and restored-down window sizes.

Stop trying. This is not Microsoft Word. If you want a footer that always stays at the bottom of the page, use Word, and print the document. Then tape it to your monitor.

If your boss is demanding this, he needs to understand that it is impossible.

Many people have come up with kludges that work on a specific browser, a specific screen resolution and aspect ratio, on only those computers that allow scripts blocked by popup blockers, or only when the window is maximized with no extra toolbars. But there is no standard way to do it that always works.

The web is not designed to do this. It was not intended when the web was designed. So no way to do it is provided. There are two things you can't reliably do on a web page:

1. Make your content exactly fit the browser viewport.

2. Place content at the very bottom of the viewport.

Just put your footer at the bottom of your content. or better yet, don't make a footer.

Edited by MidiMagic because: n/a
Member Avatar for Alexii

It isn't my boss, it's me I'm making this for.

And yeah, I have decided to put my footer just at the bottom of my page. Thanks.

Member Avatar for almostbob

one method, excusing inline style, poor practice <div style='top:auto;right:auto;bottom:0;left:auto;position:fixed;'>footer</div>

So no way to do it is provided. There are two things you can't reliably do on a web page:

of course we will pretend not to notice the footer at the bottom of this page. ↓ . Grins

Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.