0

I do not understand the basic concept of giving body and html a height of 100%. Why do we give 100% to our parent?

<body style="height:100%"> and the <html style="height:100%">.

What happens when I give 100% height to my html and body, and why do we give it?

calvinf
  • 3,754
  • 3
  • 28
  • 41
Frank
  • 179
  • 2
  • 10
  • So if you'll have a, let's say, a div with 100% then it'll fill entire window. Or if you have CSS styling for background/borders for body and bla bla bla. You need to give to html too (not just body) otherwise it'll be 100% of calculated height (=useless). – Adriano Repetti Jul 25 '14 at 13:08
  • 1
    In what context? The only need for this is to have a child element that also takes up 100% height. Otherwise, 100% height is whatever the height of an element is, not 100% of the document. – Alex Jul 25 '14 at 13:09
  • Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well. – Suresh Ponnukalai Jul 25 '14 at 13:09
  • Won't mark as duplicate because it's not a direct duplicate, but the answer to this question answers yours perfectly. http://stackoverflow.com/questions/7049875/height100-not-working – James Montagne Jul 25 '14 at 13:09

2 Answers2

3

Giving 100% height to body and html isn't an must-do. But assuming you want to use percentage values on your site you have to assign 100% height to both.

Why?

Refering to Mozilla Developer Network:

Many CSS properties can take percentage values, often to define sizes in terms of parent objects.

That means: If you assign height:20% to header (assuming html>body>header), the browser will calculate that 20% in terms of the parent (body) and the height of the body in terms of its parent (html).

But height has an initial value of auto. When you take a look into the Developer Tools of Chrome etc., you'll see that the body has a calculated height of 0 (zero) by default. Consequently the headers height isn't calculated correctly.

That's why it makes sense to define a line like the following in a reset.css or something alike:

html,
body {
    height:100%;
    width:100%;
}
SVSchmidt
  • 6,269
  • 2
  • 26
  • 37
  • 1
    Slight correction. The calculated height of body is not relevant. If there is content, the body will have a calculated height. However, percentage height will not use a calculated height, it only works with a **defined** height. – James Montagne Jul 25 '14 at 13:24
  • From [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) when talking about percentage heights: "If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto." – James Montagne Jul 25 '14 at 13:27
0

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well.

However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.

Look here

Make body have 100% of the browser height

Community
  • 1
  • 1
roxid
  • 493
  • 4
  • 14