100% Height Not Working

page body won't extend past content

[mgmuranaka]

[undeadentertainment.com ]

Hello. I'm trying to make a horizontally scrolling website for my new portfolio design. I wanted to give each section a height of 100% so that if one section is substantially larger than another, the backgrounds behind the content would extend to fit the page. For some reason the 'body' won't extend past the content that is on the page and I'm not quite sure what to do. If you look at the cloud background on the first section, that is about how far the height of the body will extend, therefore the div will only be about that high as well. The 'blog' section, however, has substantially more content, but the containing div won't extend because of the body.

Any help would be greatly appreciated as I am stumped. Thanks!

[alt131]

Hi mgmuranaka [webmasterworld.com]. What you want should be achievable. I'm assuming that each of the "sections" (blog and others), are nested inside a containing element. Double check that you have 100% height set on html, body and that container as well.

Otherwise, the following links are achieving a different layout, but cover the issues with 100% height and may provide some clues:
CSS example: 100% height, footer stuck on bottom [webmasterworld.com] (Forum Library)
Sticky Footer [webmasterworld.com]
Sticky Footer using tables [webmasterworld.com]

[mgmuranaka]

Thank you very much! I can never get 100% height to work for some reason. I kind of took the site in a different direction, but thank you very much for the references!