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

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

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

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

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

这和@ChrisC的建议非常相似。它不是使用绝对定位元素，而是使用相对定位元素。也许对你有用

<div class="container">
  <div class="my-child"></div>
</div>

你的css是这样的:

.container{
    background-color: red;
    position: relative;
    border: 1px solid black;
    width: 100%;
}

.my-child{
    position: relative;
    top: 0;
    left: 100%;
    height: 100px;
    width: 100px;
    margin-left: -100px;
    background-color: blue;
}

https://jsfiddle.net/royriojas/dndjwa6t/

Feeela是对的，但是你可以让父div收缩或扩展到子元素，如果你像这样反转div的定位:

.parent {
    position: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child {
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

这应该对你有用。

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

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

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

“你要么使用固定高度，要么就需要让JS参与进来。”

下面是JS的例子:

---------- jQuery JS示例--------------------

    function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
        var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();

        $(containerSelector).children().each(function (i){
            if (maxX < parseInt($(this).css('left')) + $(this).width()){
                maxX = parseInt($(this).css('left')) + $(this).width();
            }
            if (maxY < parseInt($(this).css('top')) + $(this).height()){
                maxY = parseInt($(this).css('top')) + $(this).height();
            }
        });
        return {
            'width': maxX,
            'height': maxY
        }
    }

    var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
    $("#SpecBody").width(specBodySize.width);
    $("#SpecBody").height(specBodySize.height);

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