<form> 是否打破高度：100%？答案

【问题标题】：Does < form > break height:100%?<form> 是否打破高度：100%？
【发布时间】：2012-03-05 23:49:33
【问题描述】：

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

<!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 崩溃了。为什么？一个表单标签“打破”“身高最近的祖先”是什么？

【问题讨论】：

标签： html css forms

【解决方案1】：

form 是一个block 元素，块元素没有任何高度，除非它们的内容扩展或明确赋予它们高度。 #container最近的祖先是form，它的高度是0，所以#containers的高度是0。

【讨论】：

明确地说，form is "flow content"，浏览器默认使用display: block。

【解决方案2】：

100% 的高度取决于所有明确声明高度的祖先。为FORM 添加一个高度，您的示例应该可以工作。

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

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

【讨论】：

【解决方案3】：

只是

form {
   overflow: hidden;
}

【讨论】：

【解决方案4】：

试试，

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

或

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

识别html行为

【讨论】：