This is pretty cool. Since CSS SUCKS at adjusting to screen size, I wrote a javascript app that basically forces certain divs to expand to the page size. Javascript is way more convenient for doing this because you can write functions to put specific constraints. As a result, the page is very flexible, and the home page behaves differently than the rest of the site. Check out the screenshots and look at the way the footer and body expand and contract. If the screen size is less than 730px, the body will contract a little. If the screen is bigger, as is the case these days, the footer fills the void. The home page drops the content down to the top of the footer, and again this relationship depends on the page size. The content pages, however, have a stable footer size, and the content is kept at the top of the page. Cool stuff, impossible though in CSS. Thank jeebus for java!

Here’s some example code of how flexible javascript can make CSS:

var myHeight = 0;  
if( typeof( window.innerHeight ) == 'number' )  
{ 	
 	//gets the height of the screen
 	myHeight = window.innerHeight;	 
}  
if (document.title == "Paulus Lab: Home") 
{ 	 	
 	if (myHeight > 730)
 	{
 	 	//this is how you control CSS div properties with java
 	 	document.getElementById('footer').style.height = myHeight - 437 + 'px';
 	 	document.getElementById('fLeft').style.height = myHeight - 437 + 'px';
 	 	document.getElementById('fRight').style.height = myHeight - 437 + 'px';
 	 	document.getElementById('footerBg').style.height = myHeight - 437 + 'px';
 		myHeight = 730; 	
 	} 
}

Credits for the window sizing script: here.

6 hours