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

4

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

于 2013-09-11T15:54:04.163 回答