HTML5 : changes page layout

Question

I have the following code which gives me following layout.

<html>
    <head>

        <title>Hello World</title>
        <style type="text/css">
            body {   
                font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
                font-size:12px;
                height:100%;
                margin:0px;
                padding:0px;
                text-transform:uppercase;
                width:100%;
            }
            .page_header{
                height:10%;
                background-color:#2BA5D9;
                overflow-y:auto;
            }

            .page_footer{
                height:15%;
                background-color:#64EDE4;
                overflow-y:auto;
            }

            .content_area{
                height:75%;
                background-color:#FAFA6E;
                overflow-y:auto;
            }
            </style>
    </head>
    <body>
        <div id="page_header" class="page_header">
           <h3>User Proifile<h3>
        </div>
        <div id="content_area" class="content_area">a
        </div>
        <div id="page_footer" class="page_footer">b
        </div>
    </body>
</html>

enter image description here

but when I add <!DOCTYPE html> at the top of code the layout changes to the below one. but I want to keep it same as the above one in html5. please help.

enter image description here

have you tried to give height: 100% also to `html` element? – Fabrizio Calderan Sep 11 '13 at 15:51 — Fabrizio Calderan, Sep 11 '13 at 15:51
Side note: it should be "Profile" in English. – Mathijs Flietstra Sep 11 '13 at 15:54 — Mathijs Flietstra, Sep 11 '13 at 15:54

score 4 · Accepted Answer · answered Sep 11 '13 at 15:54

4

You need to set the height property to html as well. body will be 100% then.

answered Sep 11 '13 at 15:54

skip405

6,119
2
25
28

1

What exactly changed in HTML5 such that this is now required? – Frank Meulenaar Nov 29 '16 at 09:59
1

@FrankMeulenaar, I believe without the `doctype` declaration, the browser renders a page in `quirks mode`. Thus producing non-standard results. My answer is for valid HTML pages. – skip405 Nov 29 '16 at 16:25

HTML5 : changes page layout

1 Answers1