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

Asked 4/1, 2010 at 6:36 Answered 10/2, 2012 at 10:21

Solved html doctype quirks-mode transitional

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:100%")

E.g

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>Test1</title>
 </head>
 <body>
  <div style="border: 2px solid red; height: 100%">
  Hello World
  </div>
 </body>
</html>

Will render the DIV with the height of the text, it will not stretch. Removing the DOCTYPE declaration causes the DIV to stretch vertically as desired.

So my questions are:

Why does it happen?
How do you keep the DOCTYPE and still allow tables to stretch?
Does / did it happen to you?
Did you know about it?, is it well known?

Checky answered 4/1, 2010 at 6:36 Comment(1)

There's a specific reason why height: 100% works without a DOCTYPE. See my explanation here: https://mcmap.net/q/37037/-why-does-height-100-work-when-doctype-is-removed – Spool 1/9, 2015 at 21:6

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.
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.
It is what browsers are supposed to do, so …
Well, I am answering this question …

Ascogonium answered 4/1, 2010 at 6:50 Comment(4)

So removing the DOCTYPE declaration is pure evil? And having footers that stick to the bottom is bad UI? – Checky 4/1, 2010 at 8:9

Yes, and no. You might be misinterpreting my comment about having the bottom of a table sticking to the bottom of the window and/or page (whichever is longer). – Ascogonium 4/1, 2010 at 8:53

So to understand, sticking to the bottom, is not the problem, but rather the "layout table" pattern because a) it can't be done using it (if you keep the DOCTYPE) and b) also a bad practice (hotdesign.com/seybold). To do so one should use other techniques (e.g. DIVs and CSS purely). did I get it right? – Checky 4/1, 2010 at 9:8

You should use whatever markup has the semantics that best describes the content (div being the last resort, as it has no semantics, and tables only being an option if the data is tabular) with CSS. – Ascogonium 4/1, 2010 at 9:23

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.

Donahoe answered 10/2, 2012 at 10:21 Comment(0)

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.

Jecon answered 5/10, 2011 at 15:58 Comment(0)

Recommended topics

Hot tags