Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
862 views
in Technique[技术] by (71.8m points)

css - Why doesn't the html element take up the whole browser viewport?

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>

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.

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:

Note, also, that the behavior you expect, i.e.,

Isn't html supposed to default to fit the entire screen in a browser?

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...