4

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
AnimalTesting
  • 127
  • 2
  • 10

2 Answers2

5

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • I have heard that the difference between the body tag and the html tag is that the BODY element may not always hit the 'bottom' of the viewport. In this case, the html tag isn't hitting it either. What is the point of the html tag if it doesn't consider the viewport of the browser? – AnimalTesting May 12 '14 at 01:54
  • 2
    @AnimalTesting: The point of the html element is that it is the root element of an HTML document. It has nothing to do with how it is displayed, but because the DOM consists of a body element as the child of an html element, the browser needs to ensure at the very minimum that both elements are displayed as blocks for the layout to function. – BoltClock May 12 '14 at 01:56
  • Is there a default tag that has something to do with the browser viewport? – AnimalTesting May 12 '14 at 01:57
  • @AnimalTesting: No, the document canvas is not represented by any element, not even the root element. – BoltClock May 12 '14 at 01:58
  • So essentially html and body are just divs, one absolute and one relative? – AnimalTesting May 12 '14 at 02:00
  • @AnimalTesting: Yes, although technically they are neither, i.e. not positioned at all. But they do appear at the origin of the viewport as part of the normal flow. – BoltClock May 12 '14 at 02:01
2

No. The html and body tag have a default value of auto for its height. So you will need to do something like

html,body {
  height: 100%;
}

Just the background of these elements are rendered by default for the full size of the screen.

pzin
  • 4,200
  • 2
  • 28
  • 49
alex
  • 602
  • 4
  • 7
  • Can you explain why html doesn't default to width and height 100% then? – AnimalTesting May 12 '14 at 01:56
  • It says on the webpage that: •The html element's height and width are controlled by the browser window. If it was, why would I need to set height to 100% then? – AnimalTesting May 12 '14 at 02:10
  • Because its a block-level entity. Just as if you had a parent div of a certain height and a child div with a default height of auto, the child div is not going to automatically be set to 100% height of its parent. – alex May 12 '14 at 02:19
  • So even though the html tag does extend out as far as the viewport goes and no further, it does not have to as long as there isn't enough content? – AnimalTesting May 12 '14 at 02:22
  • 1
    @AnimalTesting: The statement from that webpage seems to be inaccurate. – BoltClock May 12 '14 at 02:28
  • @alex - Boltclock's comment above is correct. There's quite a bit wrong with that phrogz article. It's not a bad description of how things work in quirks mode, but in standards mode things work quite differently, so I advise against recommending it as a modern guide. – Alohci May 12 '14 at 07:02