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

当前回答

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

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

2015-03-19 05:48:19

其他回答

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

诀窍是通过浮动两个元素来反转元素顺序，第一个元素右移，第二个元素左移，所以第二个元素先出现。

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

最后，向父类添加一个clearfix，就完成了(完整的解决方案参见fiddle)。

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

2013-11-08 18:32:36

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

2013-07-02 16:16:06

还可以考虑下一个方法:

CSS:

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

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

2018-05-01 17:51:19

我想出了另一个解决方案，虽然我不喜欢，但却能完成任务。

基本上以不可见的方式复制子元素。

<div id="parent">
    <div class="width-calc">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

.width-calc {
    height: 0;
    overflow: hidden;
}

如果这些子元素包含很少的标记，那么影响就会很小。

2015-07-31 14:28:58

“你要么使用固定高度，要么就需要让JS参与进来。”

下面是JS的例子:

---------- jQuery JS示例--------------------

    function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
        var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();

        $(containerSelector).children().each(function (i){
            if (maxX < parseInt($(this).css('left')) + $(this).width()){
                maxX = parseInt($(this).css('left')) + $(this).width();
            }
            if (maxY < parseInt($(this).css('top')) + $(this).height()){
                maxY = parseInt($(this).css('top')) + $(this).height();
            }
        });
        return {
            'width': maxX,
            'height': maxY
        }
    }

    var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
    $("#SpecBody").width(specBodySize.width);
    $("#SpecBody").height(specBodySize.height);

2018-02-28 20:06:33

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

推荐文章

最新文章

标签