1

次のレイアウトを提供する次のコードがあります。

<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>

ここに画像の説明を入力

しかし、<!DOCTYPE html>コードの上部に追加すると、レイアウトが下のレイアウトに変わります。しかし、上記のhtml5と同じに保ちたいと思います。助けてください。

ここに画像の説明を入力

4

1 に答える 1