...

View Full Version : Making Website Subsections Expand to Fill Screen



valhalla8
05-30-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:
http://personal.psu.edu/zcb5012/testsite22.html
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!

Excavator
05-30-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.

effpeetee
05-30-2010, 09:04 AM
You can find some useful sites here.
(http://www.exitfegs.co.uk/Sources.html)
Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum