为什么html元素不占用整个浏览器视口？ [英] Why doesn't the html element take up the whole browser viewport?
问题描述
我一直在网站上工作。许多人声称 html 元素会扩展到整个视口。当我这样做代码：
I have been working on a website. Many people claim that the html element expands to the whole viewport. When I do code like this:
<!doctype html>
<html>
<head>
<style>
html{
border:1px solid red;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
Hi
</body>
</html>
边框只在屏幕顶部显示Hi。不是 html 应该默认在浏览器中适合整个屏幕？
The border shows up only in the top part of the screen where it says "Hi". Isn't html supposed to default to fit the entire screen in a browser?
推荐答案
尽管是根元素，但 html 在CSS方面没有特殊属性;它是正常流程中的常规块框，并且块框默认情况下不具有固有高度。默认高度为 auto ;如何计算 auto 的具体细节在 spec ，但基本上对于流入块框这意味着它们的内容所需要的高度，而没有更多。这同样适用于 body 元素。
Despite being the root element, html has no special attributes in terms of CSS; it is a regular block box in the normal flow, and block boxes by default don't have an intrinsic height. The default height is auto; the specific details of how auto is calculated are described in the spec, but basically for in-flow block boxes this means as tall as their contents require, and no more. The same applies to the body element.
请注意，如果您为 html ，虽然 html 的高度不会改变，但是背景颜色会传播或泄漏到整个视口。这种行为是有意的（背景也可以以类似的方式从 body 传播到 html ）;请参阅我对这些相关问题的解答，以获得解释：
Note that if you specify a background color for html, that background color will propagate or "bleed" onto the entire viewport, although the height of html does not change. This behavior is intentional (the background can also be propagated from body to html in a similar manner); see my answers to these related questions for an explanation:
- <html> width is less than its background
- Applying a background to <html> and/or <body>
请注意，您期望的行为，例如
Note, also, that the behavior you expect, i.e.,
不是
html应该默认在浏览器中适合整个屏幕？
Isn't
htmlsupposed to default to fit the entire screen in a browser?
适用于怪异模式和IE的旧版本（6以上）;主要是由于遵守不良定义的Web标准（这是原来的CSS2推荐发布，CSS本身还处于起步阶段）的结果。也就是说， html 和 body 元素确实都是怪异模式中视口高度的100％，并且上述 html 和 body 的默认行为只适用于标准模式。
does apply in quirks mode and to very old versions of IE (older than 6); mostly a consequence of poor adherence to poorly defined web standards (this was a time when the original CSS2 recommendation was published, and CSS itself was still in its infancy). That is, the html and body elements are indeed both 100% of the viewport height in quirks mode, and the aforementioned behavior of html and body defaulting to content height only applies in standards mode.
这篇关于为什么html元素不占用整个浏览器视口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
