2

我试图让一个 div 达到 100% 的高度。这就是我所拥有的，那不起作用：

<!DOCTYPE html>
<HTML>

<head>
</head> 

<body>
    <div style="height: 100%; border: solid 1px red">
        Not working
    </div>  
</body>

</HTML>

...但删除<!DOCTYPE html>使其工作：

<HTML>

<head>
</head> 

<body>
    <div style="height: 100%; border: solid 1px red">
        Not working
    </div>  
</body>

</HTML>

我设置页面使用的 HTML 版本似乎会影响它是否有效。

我的印象<!DOCTYPE html>是，一开始就使用类似的东西是一件好事，所以我的问题是：

1）第一线最好的东西是什么？

2）鉴于此，我如何在 div 块中获得 100% 的高度？

提前谢谢了！

4

3 回答 3

3

是的，你应该有文档类型！为了让 div 达到 100% 的高度，需要设置其父母的高度。在这种情况下：

html, body {
   height: 100%;
}

应该做的伎俩。

于 2013-04-05T14:18:55.143 回答
1

问题：1）第一行最好的东西是什么？

答案：使用 DOCTYPE。

<!DOCTYPE html>是显式的文档类型声明。

从链接页面：

DOCTYPE 声明（DTD 或文档类型声明）做了几件事：

  1. 在网页上执行 HTML 验证测试时，它会告诉 HTML（超文本标记语言）验证器网页编码应该符合哪个版本的 (X)HTML 标准。当您验证您的网页时，HTML 验证器会根据适用标准检查编码，然后报告编码的哪些部分未通过 HTML 验证（不合规）。
  2. 它告诉浏览器如何以标准兼容模式呈现页面。

Bullet point #2 是使用它的一个非常重要的原因。

<!DOCTYPE html>, 具体来说, 是HTML5 的正确声明,从现在到不久的将来都应该使用。您仍然可以使用遗留字符串或过时的允许字符串，但 HTML5 只需要以前编写的格式。进一步说明，此 DTD 将导致所有现代浏览器切换到其标准（合规）模式，即使它们不支持 HTML5。

这里有更多信息：

使用 Doctype
World Wide Web Consortium激活浏览器模式（他们制定网络标准）

问题：2）鉴于此，我如何在 div 块中获得 100% 的高度？

答：您必须将 html 和 body 设置为 100%。

DIV是其父高度（您的）的 100%，只是BODY您的BODY和HTML元素不是您的 BROWSER 高度的 100%。

html, body {
  height: 100%;
}
于 2013-04-05T14:19:37.603 回答
0

有几种不同的方法可以做到这一点。

使 div 位置绝对：

<body style="margin:0px;">
    <div style="height: 100%; border: solid 1px red; position:absolute;box-sizing:border-box;">
        Not working
    </div>  
</body>

将htmland设置body为 100% 的高度（其父级）

<html style="height:100%;">  
    <body style="height:100%;margin:0px;">
        <div style="height: 100%; border: solid 1px red; box-sizing:border-box;">Not working</div>
    </body>
</html>
于 2013-04-05T14:18:47.943 回答