绝对定位的元素无法继承固定高度的相对定位父元素的高度

Question

我有一个包含th和div的元素，其中th相对定位，子元素div绝对定位。（请参见

）

可以在fiddle中看到，子元素div无法以父元素高度的百分比继承高度。

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

根据我的了解，absolute div应该从其边界框（bounding-box）继承其尺寸，而这个边界框可以是一个具有特定高度的相对元素，我认为这里就是这种情况。

注：在IE9中测试过。

- gaurav5430

Answer 1

在table-cell中放置绝对定位的元素存在问题（请阅读此篇文章）。因为您在上设置了高度，所以可以添加一个缓冲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：

示例

- Pete

---

非常感谢。我在一个Bootstrap列内遇到了类似的问题。相对包装器发挥了它的魔力！ - Turbo

Answer 2

对于不想使用表格的人，可以使用height: inherit。在我的情况下，问题是父元素（B）拥有其父元素（A）的百分比高度，因此在使用绝对定位时，B的绝对子元素需要是B的100％，但最终变成了body的100％。

请查看以下示例（只有在为父元素设置高度时才有效）：

#parent {
  width: 200px;
  height: 70px;
  background-color: pink;
  display: flex;
  flex-direction: row;
}
#child-not-absolue-or-fixed {
  background-color: lightblue;
  width: 80px;
  height: 100%;
}
#child-absolue-or-fixed {
  background-color: tomato;
  width: 80px;
  height: inherit;
  position: absolute;
  left: 100px;
}

<div id="parent">
  <div id="child-not-absolue-or-fixed"></div>
  <div id="child-absolue-or-fixed"></div>
</div>

- lewism205