CODEWITHSUNDEEP
csshtml
johnbakers
johnbakers

Reputation: 24750

HTML5 Doctype removed height100% rendering

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>

Upvotes: 0

Views: 89

Answers (1)

vaso123
vaso123

Reputation: 12391

You need to add this:

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

100% is 100% of the inherited height.

Upvotes: 1

Related Questions