使绝对定位的 div 扩展父 div 高度

Question

正如您在下面的 CSS 中看到的，我希望 child2 将自身定位在 child1 之前。这是因为我目前正在开发的网站也应该在移动设备上运行，其中 child2 应该位于底部，因为它包含了我想要在移动设备上的内容下方的导航。 - 为什么不是 2 个母版页？这是在整个 HTML 中重新定位的唯一 2 个 divs ，因此这个小改动的 2 个母版页是多余的。

HTML：

 <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 具有动态高度，因为不同的子站点可能有或多或少的导航项。

我知道绝对定位的元素已从流中删除，因此被其他元素忽略。

我尝试在父 div 上设置 overflow:hidden; ，但这没有帮助， clearfix 也没有帮助。

我最后的手段是 JavaScript 来相应地重新定位这两个 divs ，但现在我将尝试看看是否存在非 JavaScript 方法来执行此操作。

原文由 user557419 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

您要么使用固定高度，要么需要涉及 JS。

2022 年更新： 现在可以使用 CSS flexbox [1] 或 grid [2] 来反转父容器内 HTML 元素的视觉顺序，而不使用 position: absolute; .

1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#alignment_and_flex-direction
2. https://developer.mozilla.org/en-US/docs/Web/CSS/grid 或 CSS 网格布局中的列倒序

原文由 feeela 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

最后，向父级添加一个 clearfix 就大功告成了（完整解决方案请参见 小提琴）。

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

原文由 lex82 发布，翻译遵循 CC BY-SA 3.0 许可协议