Why does computed height of body with height 100% not match its actual one?

Question

This is a simple html page. I set html, body height 100%, but there is a quite long content.

Now I make the browser scale to a small size and scrollbar will show. I open Chrome Dev tool, the computed height of body seems the size of viewport, say 321px.

Normally, a body container of 321px computed height will end at the top of the page, but actually the body seems has the same height of the whole page, 1000px here.

That is my puzzle, why does the computed height not match the actual height?

html,body{
 width:100%;
 height:100%;
  background: #ccc;
}

.content {
  width: 20px;
  height: 1000px;
  background: #666;
}

<html>
<head></head>
<body>
<div class="content"> </div>
</body>
</html>

Possible duplicate of [CSS 100% height with padding/margin](https://stackoverflow.com/questions/485827/css-100-height-with-padding-margin) — Rob, May 18 '18 at 23:16

Temani Afif · Accepted Answer · 2018-05-18T23:29:24.030

1

Here you are having an overflow, so the height of the body and the html are different from 1000px and equal to screen height because of the 100%.

The thing that make you think your body has 1000px is probably the background that cover your whole content but here you are facing a special behavior of the background called background propagation.

You may change the background of the html element and you will see the issue clearly:

html,
body {
  height: 100%;
  background: #ccc;
  margin:0;
}

html {
  background: red;
  border:5px solid green;
}

.content {
  width: 20px;
  height: 1000px;
  background: #666;
}

<div class="content"> </div>

As you may notice, the body height is not equal to the content height but limited to the screen height and your content is simply overflowing the body element. I also added a border to the html element to show that its height is also limited to screen size and to better highlight the background propagation behavior.

edited May 18 '18 at 23:29

answered May 18 '18 at 22:17

Temani Afif

245,468
26
309
415

To the point. Surely the `body` height is as expected. So it is the `html` hit the special case of background propagation, right? do you usually avoid the special case or just make use of it in your practice? I think it is confusing. I have never heard about it before. – Chao May 18 '18 at 22:59
@Chao you never heard about it but it's always used :) to make it simple : if you define a color to the html element it will cover all your screen whataver the height of the html ... if you specify color to body AND not to html it will first be propagated to html and then cover the whole scree .... so in my example the red is covering the whole screen but the height of html is no more than the screen size – Temani Afif May 18 '18 at 23:02
thanks for your explanation. Last question, I want to know if modern browsers support this feature, I noticed you referred to a draft specification. – Chao May 18 '18 at 23:14
1

@Chao yes I choosed a wrong url, but the document is valid and this part of the spec has changed since CSS2 (as you can see here : https://www.w3.org/TR/CSS2/colors.html#background) so yes this feature is present and used in all the browsers – Temani Afif May 18 '18 at 23:24

score 0 · Answer 2 · answered May 18 '18 at 22:54

When you set height:100% to an element you basically telling it to take it's parent's height as it's own height.

Example :

* {
  text-align: right;
}

#parent {
  height: 100px;
  background: red;
}

#kid {
  height: 100%;
  width: 200px;
  background: lime;
}

#grandkid {
  height: 1000px;
  width: 100px;
  background: orange;
}

<div id="parent">
  <div id="kid">
    <div id="grandkid">

    </div>
  </div>
</div>

If you expect the parent to take it's children's computed height, don't define a height for it.

Example :

#parent {
  /* Parent without height takes all of it's children's heights*/
  background: red;
}

.kids {
  height: 1000px;
  width: 40px;
  background: lime;
  margin-top: 10px;
}

<div id="parent">
  <div class="kids"></div>
  <div class="kids"></div>
</div>

Why does computed height of body with height 100% not match its actual one?

2 Answers2