I was messing around with a layout and never added a doc type to my file. After adding a doc type:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
My content div that had height:100% was overflowing the page instead of growing to the size of the browser window. To get the functionality to before adding a doc type I had to add this java script.
wHeight = $(window).height();
$('#content').height(wHeight);
Why did the doc type affect the layout in this way and can I fix this without using java script?
As darksky mentioned, your div has to be contained in another one for the % to take effect. HTML is pretty much just a bunch of containers stacked inside each other. First we have the container, then the container inside of that, and finally the container. Ifg you tell your container to be 100%, it doesn’t know a 100% of what, so the right way is something in the lines of: