Member Avatar for pars99

I made a footer for a site I'm working on but I can't make it stick to the bottom of the page on any screen. any ideas how to do that?

Thanks.

  • 3 Contributors
  • 3 Replies
  • 187 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Two different things are commonly called “stick to the bottom,” and each needs a different solution: a footer that sits at the bottom of the viewport only when the page content is short (sticky footer), or a footer that is always visible and overlays content (fixed footer). ’s description reads like the former. As suggested, a minimal HTML/CSS sample helps diagnose layout problems if the site remains inaccessible.

Modern, reliable solution (Flexbox). Make the page a column flex container and let the main content grow to fill available space so the footer is pushed to the bottom when content is short:

<!doctype html>
<html>
<head><meta charset="utf-8"></head>
<body>
  <div class="site">
    <header>Header</header>
    <main class="content">...content...</main>
    <footer class="site-footer">Footer</footer>
  </div>
</body>
</html>

html, body { height: 100%; margin: 0; }
.site { min-height: 100%; display: flex; flex-direction: column; }
.content { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; padding: 1rem; background: #222; color: #fff; }

Always-visible footer (fixed). Use this only when the footer must stay on-screen; add bottom padding to avoid covering page content:

.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: #222;
}
.content { padding-bottom: 60px; } /* same height as footer */

Troubleshooting checklist: ensure valid doctype and that html/body heights aren’t zero; remove unexpected margins (body margin collapses can shift things); check for absolutely positioned or floated wrappers that break normal flow; use browser dev tools to inspect computed height and position. If posting sample markup (no JS, minimal text), include doctype, html/body, the wrapper, main and footer CSS so responders can reproduce the issue. ’s thread link shows older approaches; today the Flexbox pattern above is simplest and most robust.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

Site doesnt seem to be accessible, at least not at this moment. If you have sample HTML (without the javascript blocks, non-relevant text/content), you can post it here so we can take a look at your page structure.

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.