0

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.

4
Contributors
5
Replies
11
Views
7 Years
Discussion Span
Last Post by Welosiu
0

Change the position absolute to position relative.

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

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.

0

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: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.