Why certain DOCTYPE declarations cause 100%-height tables and divs to stop working?

Question

It seems to me that some DOCTYPE declarations in IE (6-8) may cause the browser to ignore height=\"100%\" on tables and divs (style=\"height:

Answer 1

When you remove the doctype the browser goes into quirks mode which does things differently to help older code that is not validated to render correctly.

You have to set the height on the container element so the div with 100% height doesn't inherit height: auto;

You could try a switching from transitional to strict but I doubt this will fix your issue.

Answer 2

A real solution to this "problem" would be using the following CSS:

html, body {
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;
}

#mydiv {
    height: 100%;
}

However remember that a border adds height.

Answer 3

1. Because ancient browsers had odd, inconsistent behavior and browsers treat Doctypes like an intelligence test to see if the author is writing code to the standards or to what they learned from W3Schools a decade ago. If you have height: 100% and the height of the parent element is auto then 100% means auto.

2. Generally, you don't. It screams "layout table". That said, set heights or minimum heights on the html and body elements. There are other techniques, but I don't have a handy link at the moment as, oddly, I've never been in a position where I needed the technique.

3. It is what browsers are supposed to do, so …

4. Well, I am answering this question …