CODEWITHSUNDEEP
htmlcss
Frank
Frank

Reputation: 189

why do we give height 100% to our body and html?

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?

Upvotes: 1

Views: 585

Answers (2)

SVSchmidt
SVSchmidt

Reputation: 6557

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%;
}

Upvotes: 4

roxid
roxid

Reputation: 503

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

Upvotes: 0

Related Questions