3 replies [Last post]
kshet26
Offline
newbie
Last seen: 13 years 7 weeks ago
Joined: 2008-12-05
Posts: 2
Points: 0

Hey All.

I can't seem to figure this out. I am trying to create a 3 row layout (header, content, and footer). Something like this:

---------
| Header - 20px height
---------
|
|
| Content - 100% height (the total current height of the window minus the header and the footer. The content in this case is the rich text editor FCKeditor. I need it to fill all available space (minus the header and footer).
|
|
---------
| Footer - 20px height, and always anchored to the bottom of the window
---------

    * I can get the footer to stick to the bottom of the window, but the content div wont stretch to fill the rest of the space.
    * I've tried the height:100% method, but when I do that the content div is 100% tall plus the height of the header (causing the browser's vertical scroll pane to appear). It also runs over the footer.
    * The key is that there should be no browser vertical scrolling, the would system should be 100% of the browser window, even when resized.

I couldn't find any posts with anyone that had this particular problem. Any have a solution or a starting point for a solution? Any help would be greatly appreciated!

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

If you've gotten the footer

If you've gotten the footer to stick to the bottom successfully then I would recommend reading up on faux columns and using that theory for your main content div.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

kshet26
Offline
newbie
Last seen: 13 years 7 weeks ago
Joined: 2008-12-05
Posts: 2
Points: 0

Solved using info found

strykker
Offline
newbie
Last seen: 13 years 3 weeks ago
Joined: 2009-01-09
Posts: 1
Points: 0

kshet26, I have the same

kshet26,

I have the same requirements but haven't been able to achieve what you describe above using the info at the site you referenced.
The site effectively positions the footer and header but the main (content) section still grows only as it's own content grows.
This is something I have been working on for a LONG time and simply cannot figure out how to solve in IE without reverting to quirks mode.

Simply put, i cannot make the central 'row' of a layout with a header and footer fill the remaining content even when it's own content (such as text) isn't enough to fill it up to the footer. For the site referenced, it's easy to see that this isn't working by giving a different background color to the #content div.

If you have figured this out and are wiling to share any ideas, I would very much appreciate it!