100% Height Issue With Stretching Top To Bottom - Full Page Problem with content not stretching from top to bottom.

[sonesay 7]

Another CSS problem thats been annoying me. I got this tempalte off http://peterned.home.xs4all.nl/examples/csslayout1.html the css file is here http://peterned.home.xs4all.nl/examples/css/layout1.css I went ahead and applied it to my template. Their main divs contain 1 main container, 3 sub divs (header, content, and footer).

<div id="container">

	<div id="header">
	</div>

	<div id="content">
	</div>

	<div id="footer">
	</div>

</div>

I've had to add a few more divs inside the header div to include my table for banner and navigation.

<div id="header">
	<?php include("includes/_header_section.php"); ?>
	<?php include("includes/_login_section.php"); ?>
	<div id="content_section_heading"> </div>
</div>

my output template file http://forums.xisto.com/no_longer_exists/ its css http://forums.xisto.com/no_longer_exists/

I need the content part to cover all the space between the header and footer to cover the #cotainers bg color.


my original problem which lead me to redo the above template was the output of my news (sample version) http://forums.xisto.com/no_longer_exists/. Once the page got too long the footer which is surpose to be fixed at the bottom moves. I ran the document at w3 validator and it checked out ok.

http://forums.xisto.com/no_longer_exists/ is using CSS from http://forums.xisto.com/no_longer_exists/ sorry its abit clutered and have alot of unused ids and classes there.

Notice from BuffaloHELP:

Always use proper bbcode tags.

Edited July 1, 2007 by BuffaloHELP (see edit history)

[BuffaloHelp 24]

Try adding

DIV#content_section_heading

with position, height and width values.

When you place ID on DIV tags, you have to define it in CSS every time. Or, you could have defined DIV to be full width and height all the time. But that's at designer's choice. To make every DIV to be in full height and width:

DIV { height:100%; width:100% }

[jlhaslip 4]

Do you want something like this: http://forums.xisto.com/no_longer_exists/

Snag that page and check it out.

[sonesay 7]

Yeah Jihaslip thats the desired effect but I dont like frames(or fame effect) . I prefer the vertical scroll bar to span all the way from top to bottom and have the page appear as one long page. But I think the problem occurs when the page gets too long and the footer comes off position as here http://forums.xisto.com/no_longer_exists/ but its just cosmetic.

I've tried the sugestion by buffalohelp its still not doing what I want it to do. There is another template i may look at its at http://www.openwebdesign.org/design/3270/zenlike/ its similar to what i want but without the top and bottom being set at 0 hopefully this wont lost position when i put in the content.

Thanks for the link to that example on frame like layout. I would probably like to use something like that for future projects. As for now Il' keep trying to fix it or maybe try get it working on the zenlike template. But I really should keep working on finishing the site as much as Id like things to be exactly as I want it to be I know because of differrent browsers its almost impossible.

Again thanks for your hlep guys Xisto rules!

Edited July 2, 2007 by sonesay (see edit history)

[delivi 0]

thanks for sharing the information, this is really very usefulI was searching for an effective method that works in all browsers.

[jlhaslip 4]

Found this link in my travels.

http://ryanfait.com/sticky-footer/

Might work for you???