View Full Version : Making Website Subsections Expand to Fill Screen

May 30th, 2010, 02:26 AM
This is the first website I've ever made, so please excuse my ignorance. I'm trying to make a personal website but it's in its very early stages (the code doesn't validate, visual errors, etc.). I'm trying to make my subsections expand to fill the screen vertically even if there's no content there, but I can't figure out how.

A version of the site is posted here:
If you open it, you'll see what I mean about expanding the subsections.

I tried using min-height:100% on all the subsection wrappers (btw, I'm not worried about IE6), and that worked alright until I applied an XHTML doctype to the page. Does min-height just not work with XHTML? Should I use a different doctype? I couldn't find out online :/

Any help would be appreciated. Thanks a lot!

May 30th, 2010, 03:05 AM
Hello valhalla8,
I have a very simple example of a full height layout here (http://nopeople.com/CSS/full-height-layout/index.html). It works in all browsers too, even the IE6 you're not worried about.

That will not work for your sub-sections though, it only works once and you have multiple subs. height: 100%; won't work either, as you've seen.
I think you may need to find a js solution for this.
I'm no js guy but I found this...
function resize(){ var frame = document.getElementById("frame1"); var htmlheight = document.body.parentNode.scrollheight; var windowheight = window.innerheight; if ( htmlheight < windowheight ) { document.body.style.height = windowheight + "px"; frame.style.height = windowheight + "px"; } else { document.body.style.height = htmlheight + "px"; frame.style.height = htmlheight + "px"; } }

Google javascript full height and see what else you can come up with.

May 30th, 2010, 09:04 AM
You can find some useful sites here.