1

I assumed until now that by default, according to the normal layout behavior, the <body> element filled up 100% of the height of the container <html> element even when position: static was set.

However, a simple experiment proved my assumption wrong and I was shocked.

I do understand that in the normal layout behavior, block elements' heights are elastic and stretch to fill their entire contents. However, for some reason, I thought this did not apply to the <body> element.

So, in my simple experiment, I have the following HTML:

html {
background-color: white;
}

body {
width: 50%;
background-color: gray;
margin: 0 auto;

min-height: 100%;
height: 100%;

/* position: absolute;
left: 22%; */
}
<h1>Nice sounds</h1>

<p>Zoo zoo zoo</p>

<p>Koo koo koo</p>

<p>Boo boo boo</p>

<p>Poo poo poo</p>

If I leave the position: absolute; commented as it is just now, then by default, in the static layout, the body behaves just like any other block element and is only as tall to fill up its contents, ignoring the rules height: 100%; and min-height: 100%. It looks like the picture below.

enter image description here

If, however, I change the positioning to absolute, i.e. if I uncomment the following:

position: absolute;
left: 22%;

Then of course, it obeys the height: 100%; min-height: 100% rules. It then fills up the entire height of the browser like so:

enter image description here

Is this the normal behavior? Does the <body> element behave just like any other block element with respect to its layout rules, esp. with respect to its height?

Water Cooler v2
  • 32,724
  • 54
  • 166
  • 336
  • This question might help you: https://stackoverflow.com/questions/31893330/html-and-body-elements-height?rq=1 – Terry May 08 '18 at 18:51
  • `height 100%` is inherited from its parent, and `` does not have an inherent height, only its parent, the `viewport`, does. A `position: absolute` element has the viewport as its containing block which is why `height: 100%` works there. – TylerH May 08 '18 at 19:21
  • @TylerH: You say, *"A position: absolute element has the viewport as its containing block..."*. However, I read that the *default positioning context* for an element whose `position` is `absolute` is the `` element. (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Positioning_contexts) – Water Cooler v2 May 08 '18 at 20:02
  • 1
    @WaterCoolerv2 Sorry, I was thinking of `position: fixed`, which is the one that has the viewport as its containing block, not `position: absolute;`. It can be hard to remember because both position: fixed and position: absolute (and currently position: sticky, though likely not for long) are considered "absolutely positioned"... the W3C is known for their confusing and obtuse verbiage. – TylerH May 08 '18 at 20:04

2 Answers2

2

TL;DR: Yes, this is the normal behaviour.

However.

Once upon a time, there was an older standard where body did have the height of the viewport by default. Long ago.

Also, some obscure features of HTML may confuse matters. If you do not set the background-color property of the html element, the background of body will be "inherited" by html, so that the whole window has this background, making it look as if the body takes up the whole window, which isn't the case!

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • Beautiful remark about the `` inheriting the `` element's background color. That was another observation I made, which actually got me started on this particular example. And so I took a different color for the body element on purpose to test that as well. Thanks much. – Water Cooler v2 May 08 '18 at 18:56
0

When it's static it has a parent which is html and when you use static positioning in that case it thinks within the parent. html by default as any other block has height: auto so if you change that to 100% it becomes as you expected.

body has a parent html and build its sizes according to its parent.

Sergey
  • 7,184
  • 13
  • 42
  • 85