使绝对定位div展开父div高度

Question

正如您可以在下面的CSS中看到的，我希望子2将自己定位在子1之前。这是因为我目前正在开发的网站也应该在移动设备上工作，其中子2应该在底部，因为它包含我想要在移动设备上的内容下面的导航。-为什么不是2个主页？这是整个超文本标记语言中唯一被重新定位的两个div，所以这一微小变化的两个主页是一个过度。

超文本标记语言：

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

CSS:

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

child2具有动态高度，因为不同的子网站可能有更多或更少的导航项。

我知道绝对定位元素从流中移除，因此被其他元素忽略
我尝试设置溢出：隐藏 ，但这没有帮助，clearfix。

我最后的办法是用JavaScript重新定位这两个div，但现在我将尝试看看是否存在一种非JavaScript的方法来实现这一点。




Answer 1

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

你只需要在相对div中复制子1和子2的内容，显示：父div中没有。说child1_1child2_2。把child2_2放在上面，child1_1在下面。

当你的jQuery（或其他什么）调用绝对div时，只需设置相对div（child1_1或child2_2），并显示：块和可见性：隐藏。相对的孩子仍然是不可见的，但会使父母的div更高。

Answer 2

虽然使用位置：绝对拉伸到图元是不可能的，但通常存在一些解决方案，可以在获得相同效果的同时避免绝对定位。看看这把小提琴，它解决了你特殊情况下的问题http://jsfiddle.net/gS9q7/

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

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

最后，向父级添加一个clearfix，您就完成了（完整的解决方案见fiddle）。

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

Answer 3

您自己回答了这个问题：“我知道绝对定位的元素从流中移除，因此被其他元素忽略。”因此，不能根据绝对定位的元素设置父元素的高度。

您可以使用固定高度，也可以使用JS。