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

  • Z时代
  • 2024-01-10
  • 分类：问答

如您在下面的CSS中所看到的，我想child2将自己定位在之前child1。这是因为我当前正在开发的网站也可以在移动设备上工作，该网站child2应该位于底部，因为它包含了我想要在移动设备内容下方显示的导航。-为什么没有2个母版页？这是divs在整个HTML中重新定位的仅有2个，因此，此较小更改的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 具有动态高度，因为不同的子站点可能具有更多或更少的导航项。

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

我尝试overflow:hidden;在父div上进行设置，但这没有帮助，也不起作用clearfix。

我的最后一个选择是使用JavaScript重新定位两者divs，但是现在，我将尝试看看是否存在使用非JavaScript的方法。

回答：

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

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

以上是 使绝对定位的div扩展父div的高度 的全部内容， 来源链接： utcz.com/qa/420301.html

回到顶部