100% height not working as expected

Question

In my html, there\'re a couple of divs. but none of these is showing the background image. and, of course that\'s because 100% property is not working. why is this happening?

Answer 1

Your div.section needs to be relative to another div in order for the height: 100% to work.

Answer 2

100% of what?

You need to define the parent's dimensions in order for this to work, otherwise 100% of 0, is also 0%.

In this example, since the parent element is body, you would have to set both the height of that and html to 100%. Doing this, will allow for the child element to have a height of 100%.

body, html {
    height: 100%;
}

jsFiddle example - it works.