Question

最简单的页面来演示我的问题：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body
            {
                height: 100%;
                overflow: hidden;
            }
            body
            {
                margin: 0;
                padding: 0;
            }
            #container
            {
                background: red;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

div-container正确地用红色填充浏览器窗口。现在以一种形式包装div：

<body>
    <form>
        <div id="container"></div>
    </form>
</body>

和div-container崩溃。为什么？什么是关于'打破''最近的祖先与高度'的表格标签？

Answer 1

form是block元素，除非内容扩展或明确指定高度，否则块元素不具有任何高度。 #container的最近祖先是form，其高度为0，因此#container的高度为0。

Answer 2

100％高度取决于具有明确声明高度的所有祖先。为FORM添加一个高度，您的示例应该有效。

HTML, BODY, FORM {
    height: 100%;
}

任何基于百分比的价值都是如此。如果父元素没有指定高度，则其框将根据内容调整大小。因此，孩子的百分比高度将基于为其父母计算的任何高度。

Answer 3

试试，

<style type="text/css">
        html, body, form
        {
            height: 100%;
            overflow: hidden;
        }

或

<div id="container">&nbsp;</div>

识别html行为

Answer 4

只需

form {
   overflow: hidden;
}

是＆lt;形式＆gt;休息高度：100％？

4 个答案: