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:
DOCTYPE
and still allow tables to stretch?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 …
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With