我也遇到过类似的问题。 为了解决这个问题(而不是使用正文、文档或窗口计算iframe的高度)，我创建了一个div来包装整个页面内容(例如，一个带有id="page"的div)，然后我使用它的高度。

我想出了另一个解决方案，虽然我不喜欢，但却能完成任务。

基本上以不可见的方式复制子元素。

<div id="parent">
    <div class="width-calc">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

.width-calc {
    height: 0;
    overflow: hidden;
}

如果这些子元素包含很少的标记，那么影响就会很小。

有一个很简单的方法可以解决这个问题。

你只需要在相对div中复制child1和child2的内容，在父div中使用display:none。使用child1_1和child2_2。把child2_2放在上面，child1_1放在下面。

当你的jquery(或任何东西)调用绝对div，只需设置相应的相对div (child1_1或child2_2)与display:block和可见性:隐藏。相对子元素仍然是不可见的，但是会使父元素的div更高。

试试这个，对我很管用

.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

它将把子高度设置为父高度

现在有更好的办法了。你可以使用bottom属性。

    .my-element {
      position: absolute;
      bottom: 30px;
    }

虽然拉伸到具有position: absolute的元素是不可能的，但通常有一些解决方案可以避免绝对定位，同时获得相同的效果。看看这个小提琴，解决了你的特定情况下的问题http://jsfiddle.net/gS9q7/

诀窍是通过浮动两个元素来反转元素顺序，第一个元素右移，第二个元素左移，所以第二个元素先出现。

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

最后，向父类添加一个clearfix，就完成了(完整的解决方案参见fiddle)。

通常，只要具有绝对位置的元素位于父元素的顶部，就很有可能通过浮动元素来找到解决方法。