Question

我一直在网站上工作。许多人声称html元素扩展到整个视口。当我做这样的代码时：

<!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是否应该默认适合浏览器中的整个屏幕？

Answer 1

尽管作为根元素，html在CSS方面没有特殊属性;它是正常流程中的常规块框，默认情况下，块框不具有固有高度。默认高度为auto;有关如何计算auto的具体细节在spec中有所描述，但基本上对于流内块框，这意味着它们的内容要求高，而不是更多。这同样适用于body元素。

请注意，如果您为html指定背景颜色，那么背景颜色将会传播或者＃34;出血＆＃34;尽管html的高度没有变化，但在整个视口上。此行为是有意的（背景也可以以类似的方式从body传播到html）;请参阅我对这些相关问题的答案以获得解释：

另请注意，您期望的行为，即

Isn＆＃t; t html是否应默认适合浏览器中的整个屏幕？

适用于怪异模式和非常旧版本的IE（早于6）;主要是由于对Web标准定义不严格的依从性差（这是原始CSS2推荐发布的时候，CSS本身仍然处于起步阶段）。也就是说，html和body元素在怪癖模式下确实都是视口高度的100％，并且html和body的上述行为仅默认为内容高度适用于标准模式。

Answer 2

没有。 html和body标记的高度默认值为auto。所以你需要做一些像

这样的事情

html,body {
  height: 100%;
}

默认情况下，只为屏幕的完整大小呈现这些元素的背景。

为什么html元素不占用整个浏览器视口？

2 个答案: