使绝对定位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的方式来做到这一点。

当前回答

Feeela是对的，但是你可以让父div收缩或扩展到子元素，如果你像这样反转div的定位:

.parent {
    position: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child {
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

这应该对你有用。

2013-04-25 12:55:07

其他回答

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

你只需要在相对div中复制child1和child2的内容，在父div中使用display:none。使用child1_1和child2_2。把child2_2放在上面，child1_1放在下面。

当你的jquery(或任何东西)调用绝对div，只需设置相应的相对div (child1_1或child2_2)与display:block和可见性:隐藏。相对子元素仍然是不可见的，但是会使父元素的div更高。

2015-11-18 19:09:06

还可以考虑下一个方法:

CSS:

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

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

2018-05-01 17:51:19

绝对视图将自己定位在最近的不是静态定位的祖先(position: static)上，因此如果你想让一个绝对视图定位在给定的父视图上，将父视图的位置设置为相对，将子视图的位置设置为绝对

2018-08-21 10:00:29

现在有更好的办法了。你可以使用bottom属性。

    .my-element {
      position: absolute;
      bottom: 30px;
    }

2015-03-19 05:48:19

试试这个，对我很管用

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

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

2016-10-18 04:31:59

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

推荐文章

最新文章

标签