Question

（一切都在最新的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格式。

Answer 1

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

基本上，严格地说，您不能使用该浏览器的标准集将该元素设置为100％。如果您不包含文档类型或包含过渡文档类型并相应地调整页面样式，它会尝试预测您要执行的操作。

Answer 2

你可以这样做：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上设置高度而不是min-height。

Answer 3

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

<!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>

防止相对css高度

3 个答案: