How to stop a position:absolute div from overlapping

[Altairzq]

Hello, i have this demo setup:

http://www.lloparts.com/tests/headerfoot.html

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.

[scrappedcola]

Change the position absolute to position relative.

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

[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.

[Altairzq]

That worked.

Still.. is there a CSS solution?

[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

[Welosiu]

Yea