HTML5 Doctype removed height100% rendering

Question

This question appeared to address my problem but its solution has no effect for me.

Below is a very simple HTML example. If you remove the DOCTYPE declaration, the page is 100% height fit. With it added, the height is ignored and the HTML renders entirely at the top of the page only.

Can anyone advise why? I am using the HTML5 doctype as there are other things going on in the site that are HTML5 and I don't believe I am using anything strictly HTML4 or deprecated.

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>

        <title>LAYOUT TEST</title>
        <style media="screen" type="text/css">

            .yellow {background-color: yellow;}
            .orange {background-color: orange;}
            .red {background-color: red;}
            .green {background-color: green;}

            .fixed-width100 {width:100px;}
            .fixed-height75 {height: 75px;}
            .height50percent {height: 50%;}
            .height100percent {height:100%;}
            .width100percent {width: 100%;}

            .table {display: table;}
            .row {display: table-row;}
            .cell {display: table-cell;}

            </style>
    </head>

    <body class="height100percent">

            <!--wraps entire page into a single table that fits to page-->
            <div class="width100percent height100percent table">

                <div class="row fixed-height75 green"> top header </div>

                <div class="row">
                    <div class="cell fixed-width100">middle</div>
                </div>

                <div class="row fixed-height75 green">bottom footer</div>
            </div>             


    </body>
</html>

`html, body { height: 100%; }` + the correct `DOCTYPE` should do it. — emerson.marini, Nov 19 '14 at 11:36
possible duplicate of [height:100%; not working](http://stackoverflow.com/questions/7049875/height100-not-working) — emerson.marini, Nov 19 '14 at 11:37
To understand it better, just ask yourself: _This div's height should be a 100%. But a 100% of what? Of its parents_. — emerson.marini, Nov 19 '14 at 11:39
@MelanciaUK thanks for clarification and link. I thought was a top-most level and if it was set to 100% that would mean 100% of browser window height. I see now that HTML is actually a styled parent as well, good to know! I suppose the Doctype means that my erroneous assumption is enforced, whereas without the Doctype, it allows non-standard code to work as some erroneously expect. — johnbakers, Nov 19 '14 at 11:42

score 1 · Accepted Answer · answered Nov 19 '14 at 11:36

1

You need to add this:

html {height: 100%}
body {height: 100%}

100% is 100% of the inherited height.

answered Nov 19 '14 at 11:36

vaso123

12,347
4
34
64

HTML5 Doctype removed height100% rendering

1 Answers1