Question

我有以下代码，它给了我以下布局。

<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

但是当我在代码顶部添加<!DOCTYPE html>时，布局会更改为以下内容。但我希望在html5中保持与上面的相同。请帮忙。

enter image description here

Answer 1

您还需要将height属性设置为html。 body将是100％。

HTML5：更改页面布局

1 个答案: