Member Avatar for Altairzq

Hello, i have this demo setup:

As you can see if you make the browser window thin enough (vertically), the foot will overlap with the header.

This is my question: Is there a way so the foot stops when it "touches" the header, and then a scroll appear to the right, as it would happen with divs with default positioning?

Note: I need the absolute positioning so the foot stays at the bottom always.

  • 4 Contributors
  • 5 Replies
  • 443 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by Welosiu

Dani AI

Generated

Short answer: avoid taking the footer out of the document flow unless you really need it fixed to the viewport. Absolute/fixed elements are removed from flow, so when the viewport is shorter than header+footer they will overlap the header. 's idea of switching to relative on small viewports works; here are two cleaner approaches that keep the footer at the bottom without overlap.

A modern, CSS-only preferred solution (no JS): make the page a column flex container so header → content → footer naturally stack, and the footer only sits at the bottom of the viewport when content is short. This prevents overlap on short viewports while keeping the footer visually at the bottom.

HTML:

<div class="site">
  <header class="site-header">Header...</header>
  <main class="site-main">Page content...</main>
  <footer class="site-footer">Footer...</footer>
</div>

CSS:

html,body {height:100%; margin:0;}
.site {min-height:100vh; display:flex; flex-direction:column;}
.site-main {flex:1; overflow:auto;} /* allows content to scroll when needed */

If you truly must keep the footer fixed to the screen (always visible), use a CSS variable + calc to prevent it growing past the available space so it never crosses the header. That lets the footer become internally scrollable instead of overlapping the header:

:root { --header-h: 60px; }

.site-header { position:fixed; top:0; left:0; right:0; height:var(--header-h); }
.site-footer { position:fixed; bottom:0; left:0; right:0;
              max-height:calc(100vh - var(--header-h)); overflow:auto; }

/* Give content safe offsets so it's not covered */
.site-main { padding-top:var(--header-h); padding-bottom:1rem; }

If header/footer heights are dynamic, update the CSS variable at runtime using ResizeObserver (or a debounced resize handler) instead of hardcoding pixels. This is a small, robust improvement on and suggestions.

Troubleshooting notes: test on small/mobile viewports, add padding-bottom to content so interactive elements aren't hidden behind a fixed footer, use z-index carefully, and avoid forcing large pixel heights for header/footer whenever possible.

Recommended Answers

All 5 Replies

Member Avatar for scrappedcola

Change the position absolute to position relative.

#foot  {
background:none repeat scroll 0 0 #CCCCFF;
bottom:0;
height:200px;
position:relative;
width:500px;
}
Member Avatar for Altairzq

Thanks for your reply.

The problem is that I need the footer to stay at the bottom of the screen. But now that I think of it, maybe i could detect with Javascript when the screen is smaller than the height of header+foot and then change the positioning to relative. I'm going to try this.

Thank you.

Member Avatar for Altairzq

That worked.

Still.. is there a CSS solution?

Member Avatar for almostbob

why set a height? especially why px

#footer {bottom:0; top:auto; width:100%; position:fixed; z-index:10; text-align:center; padding:.5em 1em; }
#header {top:0; bottom:auto; width:100%; position:fixed; z-index:10; text-align:center; padding:.5em 1em; }

may work and not waste so much screen space for empty footers and headers

Edited by almostbob because: n/a
Member Avatar for Welosiu

Yea

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.