1

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?

Lumpy
  • 3,632
  • 4
  • 34
  • 58
  • Can you give more code? At least the code for your content div (for #content)? – Phil Aug 21 '12 at 00:52
  • 2
    The answer to your questions could be here: http://stackoverflow.com/questions/1997842/why-certain-doctype-declarations-cause-100-height-tables-and-divs-to-stop-worki – ace Aug 21 '12 at 01:59
  • 1
    Make sure its parent element specifies a `height` explicitly like `height: 500px` so `100%` is not ambiguous. Anytime you use percentages to size an element, ask your self, "100% of what?" – darksky Aug 21 '12 at 02:08
  • Why does the doc type matter? – Lumpy Aug 21 '12 at 13:43

1 Answers1

1

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:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
}
Yisela
  • 6,909
  • 5
  • 28
  • 51
  • Thanks, this worked perfectly, but why does the doc type matter? – Lumpy Aug 21 '12 at 13:44
  • According to this page: http://able2know.org/topic/39084-1 , the "height" table tag was depreciated in HTML 4.01, so using any doctype with that or beyond shouldn't let it work. URL: http://able2know.org/topic/39084-1 – Yisela Aug 21 '12 at 20:39