CODEWITHSUNDEEP
htmlcss
Scott Stafford
Scott Stafford

Reputation: 44798

What does it mean to give a div a style='height:100%'?

There's lots of questions on SO related to this, but the ones I scanned are all for detailed specific situations. What I want to know is, at a conceptual level, what does it mean to say:

<div style='height:100%'>

How high is 100%? 100% of what?

[EDIT]

Followup question: If 100% represents the height of the parent, but the parent is <body> and has no height other than the height of the div, then what does it mean? It seems recursively defined.

Upvotes: 15

Views: 8467

Answers (4)

sachleen
sachleen

Reputation: 31141

100% of the parent container's height.

See here: http://jsfiddle.net/6VRn6/

If you want to use this method to make the div 100% of the page's height, you have to specify the height as 100% of the body and html as well.

body, html {
  height: 100%;
}

When you don't specify a html or body height, their heights are the sum of the heights of the elements in it.

Updated demo showing this. We have a 200px div with 2px borders totaling 204px and then a 40px status div. The body height should be 244px. Now, if you add the CSS above to the page, the height will be the height of the bottom right quadrant of the jsfiddle. Try adding it and running the code again. Then resize the result pane and run it again to see the height change accordingly.

Upvotes: 13

xan
xan

Reputation: 4696

It just means 100% of the div or class or tag it is enclosed within. Try having an idea somewhat this:

{--parent loop { ..height 100% of above loop .. } }

Upvotes: 0

Ionel Lupu
Ionel Lupu

Reputation: 2811

The height:100% means : Make that div big as the parent!

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

100% of the offsetParent. In most cases, that's the document. It can also be an element with position other than static, or a component of a table.

Upvotes: 5

Related Questions