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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (33)

正如在下面的CSS中所看到的,我希望child 2能将自己定位在子1之前。这是因为我目前正在开发的网站也应该在移动设备上工作,因为它包含了我想要的移动设备内容下面的导航。-为什么不使用2个主页呢?这是唯一在整个HTML中重新定位的两个div,所以对于这个微小的更改,有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; }

子2具有动态高度,因为不同的子站点可能有或多或少的导航项。

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

我试着设置overflow:hidden;在父div上,但这没有帮助,清除也没有帮助。

最后,我将使用javascript来相应地重新定位这两个div,但现在我将尝试看看是否存在一种非javascript的方法。

提问于
用户回答回答于

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

用户回答回答于

通过浮动两个元素来反转元素的顺序,第一个元素在右边,第二个元素在左边,所以第二个元素首先出现。

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

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

扫码关注云+社区

领取腾讯云代金券