HTML5：<!DOCTYPE html> 改变页面布局[重复]答案

【问题标题】：HTML5 : <!DOCTYPE html> changes page layout [duplicate]HTML5：<!DOCTYPE html> 改变页面布局[重复]
【发布时间】：2013-09-15 18:01:09
【问题描述】：

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

<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 中保持与上述相同。请帮忙。

【问题讨论】：

您是否尝试将 height: 100% 也赋予 html 元素？
旁注：应该是英文的“Profile”。

标签： css html layout styles

【解决方案1】：

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

【讨论】：

HTML5 中究竟发生了什么变化，以至于现在需要这样做？
@FrankMeulenaar，我相信没有doctype 声明，浏览器会在quirks mode 中呈现页面。从而产生非标准的结果。我的答案是针对有效的 HTML 页面。