Alex Rivera | Logout

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

Asked 2010-01-04T06:36:57.840
16

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:

  1. Why does it happen?
  2. How do you keep the DOCTYPE and still allow tables to stretch?
  3. Does / did it happen to you?
  4. Did you know about it?, is it well known?
html doctype quirks-mode transitional
Edit
Report

1 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.

answered 2011-10-05T15:58:29.217

Your Answer