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

正如你在下面的CSS中看到的，我想让child2将自己定位在child1之前。这是因为我目前正在开发的网站也应该在移动设备上工作，其中child2应该在底部，因为它包含了我想在移动设备上的内容下面的导航。-为什么不是2本杰作?这是在整个HTML中唯一被重新定位的2个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; }

Child2具有动态高度，因为不同的子站点可以有或多或少的导航项。

我知道绝对定位的元素被从流中移除，因此被其他元素忽略。我试着设置溢出:隐藏;在父div上，但这没有帮助，clearfix也没有。

我最后的手段将是JavaScript来相应地重新定位两个div，但现在我将尝试看看是否存在一种非JavaScript的方式来做到这一点。

当前回答

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

2013-07-02 16:16:06

其他回答

试试这个，对我很管用

.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

它将把子高度设置为父高度

2016-10-18 04:31:59

还可以考虑下一个方法:

CSS:

.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

另外，因为你试图重新定位div考虑css网格

2018-05-01 17:51:19

2013-07-02 16:16:06

这个问题是在2012年flexbox出现之前提出的。使用现代CSS解决这个问题的正确方法是使用媒体查询和移动设备的伸缩列反转。不需要绝对定位。

https://jsfiddle.net/tnhsaesop/vjftq198/3/

HTML:

<div class="parent">
  <div style="background-color:lightgrey;">
    <p>
      I stay on top on desktop and I'm on bottom on mobile
    </p>
  </div>
  <div style="background-color:grey;">
    <p>
      I stay on bottom on desktop and I'm on top on mobile
    </p>
  </div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .parent {
    flex-direction: column-reverse;
  }
}

2019-11-05 02:58:04

你自己回答了这个问题:

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

你不能根据绝对定位元素来设置父元素的高度。

要么使用固定高度，要么使用JavaScript。

现在，人们可能会使用CSS flexbox或网格布局来反转父容器内HTML元素的可视顺序，而不使用position: absolute;。参见CSS网格布局中列的反向顺序

2012-08-22 10:20:02

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

推荐文章

最新文章

标签