Question

当我这样做时

<html>
   <head>
   </head>
   <body>
     <div style="width:100%;height:100%;background:blue;"></div>
   </body>
</html>

div填充窗口

但如果我在开头添加doctype标签

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
     <div style="width:100%;height:100%;background:blue;"></div>
   </body>
</html>

div填充宽度，但不填充高度。

知道发生了什么事吗？我知道我应该放置doctype标签，我只是想知道它在这种情况下做的是导致不同的行为。

Answer 1

缺少doctype声明会触发“怪癖模式”，这意味着浏览器会执行不同的操作来处理文档，假设它是可能依赖于旧浏览器中存在的功能的遗留代码。粗略地说，“怪癖模式”意味着浏览器尝试的行为或多或少类似于Internet Explorer 4.但它们以不同的方式执行;我编写了一份不完整的what happens in “quirks mode.”“Quirks模式”列表，只应该用于需要它的遗留页面;相反，以“quirks模式”工作的页面可能会在“标准模式”中分崩离析，只需添加doctype声明即可实现。

在你的情况下，在这里跳过理论部分，你需要添加一些规则来使div元素以“标准模式”填充画布：

<style>
  head, body { height: 100%; margin: 0; padding: 0;}
</style>

和

<div style="width:100%;height:100%;background:blue; position: absolute;"></div>

Answer 2

请阅读本文，了解有关doctype的想法， doctype是网页设计中非常重要的一部分

http://www.w3schools.com/tags/tag_doctype.asp

http://htmlhelp.com/tools/validator/doctype.html

Answer 3

当您将Doctype添加到html页面时，您指示浏览器遵循doctype指定的标准。如果未指定，浏览器将不知道它是什么类型的文档。

您应始终在页面中指定<!DOCTYPE>。

一些链接可帮助您了解什么是doctype以及为什么它很重要。 http://en.wikipedia.org/wiki/Document_Type_Declaration
http://www.w3schools.com/tags/tag_doctype.asp

Answer 4

实际上确实如此。问题是，身体的高度不够大，所以div的高度将与身高一样大。

doctype对css的影响

4 个答案: