height property inherit percentage as is?

Question

simple noob question, assuming i have this:

<div style="height:90%; display:block">
    <div id="second" style="height:inherit">
        <div id="third" style="height:inherit">
        </div
    </div>
</div>

Does the third div has a property of 72% height or 90%?

Answer 1

it inherits the 90%, but relative to its parent, which is 90% but that, to the child, is like 100%.. oh well you get it :) here's my fiddle: http://jsfiddle.net/DL6Vj/4/

<div style="height:90%; display:block;width:50%;float:left;background:tan">
    <div id="second" style="height:inherit;background:red">
        <div id="third" style="height:inherit;background:pink"></div>
    </div>
</div>

<div style="height:73%; display:block;float:left;width:50%;background:green"></div>

if compared to the absolute 100% of the body yes, it's a 73% height approx

Answer 2

It'll inherit 90% from the parent.

As someone suggested in the comments, see the result in the fiddle: it's 90% relative to the parent, which is at the same time about 72% (actually almost 73%) of the body height. (90% of 90% of 90% of page height)

Answer 3

Yes, no, I mean yes, depends from where you look :)

So it's always 90% the height of it's parent.

http://jsbin.com/tigod/2/edit

Does the third div has a property of 72% height or 90%?

90%