Why does the height on html element not have effect?

Question

<!DOCTYPE html>
<html>
<head>
  <style>
    html,
    body {
      font-size: 16px;
      width: 70vw;
      height: 40vh;
      background-color: yellow;
    }
    
    h1 {
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>My First Heading</h1>
</body>
</html>

In the code above I set the width to 70vw and the height to 40vh.

I have two questions:

Why does the height of the html,body still fill up 100% of the viewports height when I specified it should only fill up 40% using 40vh in the html,body declaration?
Why is the h1 elements width set to the 70vw from the html,body declaration even though width is not inherited but the height for the h1 isn't set to 40vh from the html,body declaration?

for 2nd question .. h1 is block element si it takes 100% of container width and height is auto so it depends on the content and not height of parent — Temani Afif, Dec 27 '17 at 21:14
for the 1st question, add border to the declaration of html,body and you will see that it's taking the height/width you specified — Temani Afif, Dec 27 '17 at 21:15
So then the question is why does the background color apply outside of that? — takendarkk, Dec 27 '17 at 21:15
and that's why i commented, i don't know yet about backround :) — Temani Afif, Dec 27 '17 at 21:16
@TemaniAfif But the width of the element is depending on the width of the parent right? Since whenever I change the `width` on the `html,body` to for example `width:50vh`, `width:60vh`, etc, the red background of the h1 is changed accordingly. — , Dec 27 '17 at 21:21
@ToothyRel yes right ... h1 will take 100% width of parent which mean exactly the same width as the parent (here the body) and we should of course consider margin/padding — Temani Afif, Dec 27 '17 at 21:23

score 7 · Accepted Answer · edited Jan 02 '18 at 16:21

7

It actually works, but there is a tricky place in css. html gets background of body if it is unset on html itself and viewport is filled by background of html (that's the only inheritance from child in css).

This behavior is specified in CSS Backgrounds and Borders Module Level 3:

The document canvas is the infinite surface over which the document is rendered. [CSS2] Since no element corresponds to the canvas, in order to allow styling of the canvas CSS propagates the background of the root element

For documents whose root element is an HTML HTML element or an XHTML html element [HTML]: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element.

I've added background to html into your example and you can see, it's fine:

html, body {
  font-size: 16px;
  width: 70vw;
  height: 40vh;
  background-color: yellow;
}

html {
  background: white;
}

h1 {
  background-color: red;
}

<h1>My First Heading</h1>

The other thing I can do is outline - it'll show where elements actually end:

html, body {
  font-size: 16px;
  width: 70vw;
  height: 40vh;
  background-color: yellow;
  outline: 1px dotted blue;
  outline-offset: -1px;
}

h1 {
  background-color: red;
}

<h1>My First Heading</h1>

One more interesting case:

html {
  width: 50vw;
  height: 50vh;
}

body {
  margin: 40vh 0 0 40vw;
  width: 30vw;
  height: 30vh;
  background: linear-gradient(45deg, red, blue);
}

html, body {
  border: 8px solid;
}

edited Jan 02 '18 at 16:21

BoltClock

700,868
160
1,392
1,356

answered Dec 27 '17 at 21:28

Qwertiy

19,681
15
61
128

Why downvoting? :( – Qwertiy Dec 27 '17 at 21:30
1

*html gets background of body if it is unset on html itself and viewport* where i can read about this ? – Temani Afif Dec 27 '17 at 21:31
@TemaniAfif, updated the answer. – Qwertiy Dec 27 '17 at 21:38
Is it better to just style the `body` element and not style the `html` element at all? – Dec 27 '17 at 22:33
@ToothyRel, why? `html` is useful for `rems`, for example. – Qwertiy Dec 27 '17 at 22:49
I am just confused if the `html` gets the `body` `background-color` or vice versa? `It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.` That's what it said in the link I am not sure why. – Dec 27 '17 at 22:57
1

@ToothyRel, me neither. – Qwertiy Dec 27 '17 at 23:14
@Qwertiy One last question. In the code snippet where you draw the outline why is there space on the top between the red background and the top of the yellow. I added `margin:0` and it removed the left space but not the top space. – Dec 27 '17 at 23:55
@ToothyRel, it's margin collapse and margin from `h1` tag. You can remove that margin or add `border` to the `body` to prevent collapsing. – Qwertiy Dec 27 '17 at 23:58

Sanchit Patiyal · Answer 2 · 2017-12-27T21:41:17.217

5

The reason why you are seeing entire background as yellow is because

The background of the root element becomes the background of the canvas and covers the entire canvas [...]

Try giving a different color to body and you will see the difference

<!DOCTYPE html>
<html>

<head>
  <style>
    html,
    body {
      font-size: 16px;
      width: 70vw;
      height: 40vh;
      background-color: yellow;
    }
    
    h1 {
      background-color: red;
    }
  </style>
</head>

<body style="background-color:blue;">
  <h1>My First Heading</h1>
</body>

</html>

Read here in details

edited Dec 27 '17 at 21:41

answered Dec 27 '17 at 21:29

Sanchit Patiyal

4,910
1
14
31

even if you remove background from HTML we see it too, you can keep only the one in the body – Temani Afif Dec 27 '17 at 21:30
@TemaniAfif, nope. – Qwertiy Dec 27 '17 at 21:31
remove the one of html also :) – Temani Afif Dec 27 '17 at 21:32
@TemaniAfif and that is because the HTML takes the background-color of BODY and since the canvas takes from HTML – Sanchit Patiyal Dec 27 '17 at 21:33
2

yes that's what i meant too ;) as it's not only about background of HTML, but also the trick about the background of body going to the HTML – Temani Afif Dec 27 '17 at 21:34
1

https://www.w3.org/TR/css-backgrounds-3/#special-backgrounds – Qwertiy Dec 27 '17 at 21:39
`The background of the root element becomes the background of the canvas and covers the entire canvas` What exactly is the `root element` and the `canvas` in this case? Is the root element the `body` or the `html`? And is the canvas simply the browser window (like there is no element that corresponds to it)? – Dec 27 '17 at 22:51

Why does the height on html element not have effect?

2 Answers2

Linked

Related