100% height issue with IE8 doctype declaration

Question

Ok I have a simple HTML web page. Problem is that when I specify a Doctype at the beginning of the page, my stylesheet height:100% does not work.

If I remove the doctype declaration everything works as expected. So anyone knows why this happens? What doctype should I use?
I also tried using "Strict" DOCTYPE declaration but still same problem. Thanks in advance.

Below is the full HTML where height:100% does not work:

<!DOCTYPE html PUBLIC "-//VYOM//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/transitional.dtd">
<html>     
<body>
    <div style="background-color:red; height:100%;">
        testing 123...
    </div>     
</body>

If I remove the doctype the DIV occupies 100% of the available height as expected:

<html>     
<body>
    <div style="background-color:red; height:100%;">
        testing 123...
    </div>     
</body>
</html>

Here's a simple and clear explanation of the DOCTYPE issue: http://stackoverflow.com/a/32215263/3597276 — Michael Benjamin, Aug 25 '15 at 23:10

score 3 · Accepted Answer · answered Oct 20 '11 at 14:04

3

Add:

body, html {
    height:100%
}

answered Oct 20 '11 at 14:04

Diodeus - James MacFarlane

112,730
33
157
176

I wish whomever down-voted the accepted answer would at least provide an explanation. – Diodeus - James MacFarlane Jan 18 '12 at 14:26

100% height issue with IE8 doctype declaration

1 Answers1