我一直在做一个网站。许多人声称 html 元素扩展到整个视口(viewport)。当我编写这样的代码时:
<!doctype html>
<html>
<head>
<style>
html{
border:1px solid red;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
Hi
</body>
</html>
边框仅出现在屏幕顶部的“嗨”字样处。 html 不是应该默认适合浏览器中的整个屏幕吗？
最佳答案
尽管是根元素，html 在 CSS 方面没有特殊属性；它是正常流程中的常规 block 盒，默认情况下 block 盒没有固有高度。默认高度为auto； spec 中描述了如何计算 auto 的具体细节, 但基本上对于流入 block 框来说，这意味着只要它们的内容需要那么高，仅此而已。这同样适用于 body 元素。
请注意，如果您为 html 指定背景颜色，该背景颜色将传播或“渗入”到整个视口(viewport)，尽管 html 的高度不会改变.这种行为是有意的(背景也可以以类似的方式从 body 传播到 html)；请参阅我对这些相关问题的回答以获取解释:
另请注意，您期望的行为，即
Isn't
htmlsupposed to default to fit the entire screen in a browser?
确实适用于 quirks 模式和非常旧版本的 IE(早于 6)；主要是由于对定义不明确的 Web 标准的遵守不力(这是发布原始 CSS2 推荐的时间，而 CSS 本身仍处于起步阶段)。也就是说，html 和 body 元素在 quirks 模式下确实都是视口(viewport)高度的 100%，而上述 html 和 body 默认内容高度仅适用于标准模式。
关于html - 为什么 html 元素不占据整个浏览器视口(viewport)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23599919/