Question

This question似乎解决了我的问题，但其解决方案对我没有影响。

下面是一个非常简单的HTML示例。如果删除DOCTYPE声明，则页面高度为100％。添加它后，高度将被忽略，HTML仅完全呈现在页面顶部。

任何人都可以建议为什么？我正在使用HTML5文档类型，因为网站中还有其他HTML5格式，我不相信我使用的是严格的HTML4或弃用。

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>

        <title>LAYOUT TEST</title>
        <style media="screen" type="text/css">

            .yellow {background-color: yellow;}
            .orange {background-color: orange;}
            .red {background-color: red;}
            .green {background-color: green;}

            .fixed-width100 {width:100px;}
            .fixed-height75 {height: 75px;}
            .height50percent {height: 50%;}
            .height100percent {height:100%;}
            .width100percent {width: 100%;}

            .table {display: table;}
            .row {display: table-row;}
            .cell {display: table-cell;}

            </style>
    </head>

    <body class="height100percent">

            <!--wraps entire page into a single table that fits to page-->
            <div class="width100percent height100percent table">

                <div class="row fixed-height75 green"> top header </div>

                <div class="row">
                    <div class="cell fixed-width100">middle</div>
                </div>

                <div class="row fixed-height75 green">bottom footer</div>
            </div>             


    </body>
</html>

Answer 1

您需要添加以下内容：

html {height: 100%}
body {height: 100%}

100％是继承高度的100％。

HTML5 Doctype已移除height100％呈现

1 个答案: