2

（一切都在最新的 Firefox 中进行了测试。）

这个 html 代码创建了一个几乎填满屏幕的红色框：

<html>
<head>
</head>
<body>
  <div style="height:100%;background-color:red;"></div>
</body>
</html>

但是添加 doctype 声明会禁用相对高度并使 div 的高度为零：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div style="height:100%;background-color:red;"></div>
</body>
</html>

为什么是这样？特别是，我不明白为什么浏览器会在没有 doctype 的文档中考虑相对高度，因为它们不在显式 html 中。

4

3 回答 3

4

doctype 为浏览器强制执行一组特定的标准。如果页面不包含文档类型，浏览器通常会使用某种怪癖或过渡模式，这对标记错误更为宽容（但这是不好的做法，可能会错误地显示项目）。

从本质上讲，严格来说，您不能使用该浏览器的标准集将该元素设置为 100% 的高度。如果您不包含文档类型或包含过渡类型，它会尝试预测您想要做什么，并相应地调整页面的样式。

于 2013-05-24T12:22:47.230 回答
3

你可以这样做：http ://cdpn.io/aHlCd

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

html, body {height: 100%; margin: 0; padding: 0;}
div {min-height: 100%; background: red;}

</style>

</head>
<body>

<div></div>

</body>
</html>

您也可以只在 div 上设置高度而不是最小高度。

于 2013-05-24T13:12:25.420 回答
0

以上是为什么，如果您正在寻找修复，将位置设置为绝对并应用顶部、右侧、左侧和底部应该可以解决问题的原因：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div style="position: absolute;height:100%;background-color:red;bottom: 0;top: 0;right: 0;left: 0"></div>
</body>
</html>
于 2013-05-24T12:41:27.260 回答