正如你在下面的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的方式来做到这一点。


当前回答

使用纯JavaScript,您只需要使用getComputedStyle()方法检索静态位置子元素.child1的高度,然后使用HTMLElement将检索值设置为相同子元素的填充顶部。样式属性。


检查并运行下面的代码片段作为我上面描述的一个实际示例:

/* JavaScript */ var child1 = document.querySelector(".child1"); var parent = document.getElementById("parent"); var childHeight = parseInt(window.getComputedStyle(child1).height) + "px"; child1.style.paddingTop = childHeight; /* CSS */ #parent { position: relative; width: 100%; } .child1 { width: auto; } .child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; } html, body { width: 100%;height: 100%; margin: 0; padding: 0; } <!-- HTML --> <div id="parent"> <div class="child1">STATIC</div> <div class="child2">ABSOLUTE</div> </div>

其他回答

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

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 */
}

这应该对你有用。

你自己回答了这个问题:

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

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

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

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

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

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

<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;
}

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

“你要么使用固定高度,要么就需要让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);