HTML 的'高度：100%”如何与百分比值配合以及 DOCTYPE 的影响？

HTML 的 Height 属性和百分比值

在 HTML 中，可以将 height 属性设置为百分比值来指定高度元素相对于其父元素。但是，这仅在父元素具有明确的高度设置时才有效。默认情况下，元素的隐式高度为“auto”，这意味着它们的高度是根据其内容自动确定的。

问题的第一部分，关于如何使 div 填充无需删除 DOCTYPE 的页面，可以通过修改 CSS 以包含“html”元素的高度声明来回答：

html {高度：100%； }<br>

此解决方案无需删除 DOCTYPE，确保页面以标准模式呈现，而不会中断高度功能。

怪异模式与标准模式

你的问题的第二部分，关于删除 DOCTYPE 的效果，深入研究了怪异模式和标准模式之间的区别。

当 DOCTYPE 时存在时，浏览器进入标准模式，该模式严格遵守 Web 标准。但是，如果省略 DOCTYPE，浏览器将切换到怪异模式，该模式会尝试模拟旧版浏览器的行为。

在标准模式下，始终计算高度百分比相对于其父元素的高度。在您的示例中，由于 body 元素没有明确的高度（它设置为“auto”），因此 div 的 100% 高度实际上被计算为“auto”，从而导致没有可见内容。

相比之下，怪异模式的运行规则不太可预测。在此模式下，div 的高度是相对于视口高度计算的，允许 div 按预期填充整个页面。

结论

仅当父元素定义了显式高度时，为 div 设置 100% 的高度值才能在标准模式下按预期工作。通过将 html 元素的高度设置为 100%，您可以确保正确计算页面内的高度百分比。如果删除 DOCTYPE，浏览器会切换到怪异模式，该模式会修改百分比的计算并允许 div 以 100% 的高度填充页面，即使未明确指定其父级的高度也是如此。

以上是HTML 的'高度：100%”如何与百分比值配合以及 DOCTYPE 的影响？的详细内容。更多信息请关注PHP中文网其他相关文章！