absolute div not inheriting height of relative parent with fixed height

Issue

I have a th and a div inside it. the th is positioned relative and the child div is positioned absolute. (see div class="horizontal")

The child div is not inheriting the parent height in percentage as you can see in the fiddle

http://jsfiddle.net/gaurav5430/fmrWj/1/

As per my knowledge, the absolute div should inherit its dimensions from its bounding-box, which can be a relative element with a specific height, which i think is the case here.

P.S : tested in IE9.

Solution

There is an issue with placing absolute positioned elements inside a table-cell (have a read of this). As you have a height set on your th you are able to add a buffer div in:

<tr>
    <th><div class="relative"><div class="axesTitle">Parameter</div></div></th>
    <th><div class="relative"><div class="horizontal">Q4 '14 ghfggfdf</div></div></th>
    <th><div class="relative"><div class="horizontal">QoQ</div></div></th>
    <th><div class="relative"><div class="horizontal">YTD</div></div></th>
</tr>

And then use the following styles:

th div.relative {
    position:relative;
    height:100%;
}

And this should allow you to set a height for your absolute - have a look at your js console in the following example and you will see the height is set to 40:

Example

Answered By - Pete