绝对div不继承具有固定高度的相对父级的高度

时间:2014-07-09 09:36:30

标签: html css layout css-position

我的内部有thdivth位于相对位置,而div位于absolute位置。 (见div class =" horizo​​ntal")

孩子div没有以百分比的形式继承父高度,正如您在小提琴中看到的那样

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

据我所知,absolute div应该从其边界框继承其尺寸,边界框可以是具有特定高度的相对元素,我认为就是这种情况。

P.S:在IE9中测试。

1 个答案:

答案 0 :(得分:3)

将绝对定位元素放在表格单元格(have a read of this)中会出现问题。当您在th上设置了高度时,您可以在以下位置添加缓冲区div:

<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>

然后使用以下样式:

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

这应该允许你设置绝对的高度 - 在下面的例子中查看你的js控制台,你会看到高度设置为40:

Example