|
|
|
Admin
Group: Administrators
Last Login: 10/20/2011 4:56:10 PM
Posts: 143,
Visits: 352
|
|
I wanted to post this link because it's come in handy a lot. Basically it's an example showing you how you can get a page to span 100% with a header and footer. The middle content section will scale. It used to be pretty easy to get 100%-height layouts with tables, but with CSS it was a bit tricky. This works in both IE and Firefox.
It uses 100% height tags for the HTML & BODY tags, and also for the "container" DIV. Set a height on the header, then the "content" div follows (both are in container). The footer is the real tricky part usually. Try to follow...
The "container" DIV is set to relative positioning. Then, the footer's position is set ABSOLUTELY to "bottom:0px;" What this does is position the footer at the very bottom of the container (not the page). This usually would create a problem because if you had a bunch of content in the middle part of the layout, the bottom of the content would be covered up by your footer DIV (because it's absolutely positioned). So what you do is apply a padding to the bottom of the "content" DIV equal to the height of the footer DIV PLUS a little breathing room (50px or whatever). What this does is create blank space at the bottom of the "content" DIV, which pushes down the footer past the point where it would usually cover up some of the content. Hope this all makes sense!
http://www.xs4all.nl/~peterned/examples/csslayout1.html
|
|
|
|