请绝对定位的div扩大父DIV高度(Make absolute positioned div exp

正如你可以在下面的CSS看，我想的child2 child1之前把自己定位。 这是因为我目前正在开发也应该在移动设备上运行的网站，在其上的child2应该是在底部，因为它包含了我希望在移动设备上的内容下方的导航。 - 为什么不2个masterpages？ 这是唯一的2周的div这是在整个HTML重新定位，所以2个masterpages这个微小的变化是矫枉过正。

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来相应地重新定位两个div，但是现在我会尝试，看看是否存在这样的非JavaScript方式。

Answer 1:

你自己回答了这个问题：“我知道，绝对定位的元素从流动，从而被其它元素忽略删除。” 因此，根据绝对定位的元素，你不能设置家长的高度。

您既可以使用固定的高度，或者你需要涉及到JS。

Answer 2:

虽然一直延伸到与元素position: absolute是不可能的，经常有解决方案，在那里你可以避开绝对定位而获得同样的效果。 看看这个小提琴是你的具体情况解决问题http://jsfiddle.net/gS9q7/

诀窍是由浮动两个元件，第一至右侧时，第二到左扭转元件顺序，因此第二首先出现。

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

最后，clearfix添加到父就大功告成了（见捣鼓了完整的解决方案）。

一般情况下，只要有绝对位置的元素定位在父元素的顶部，有很好的机会，你找到浮动元素的解决方法。

Answer 3:

还有就是要解决这个问题相当简单的方法。

你只需要复制child1和的child2的相对的div显示内容：在父DIV没有。 说child1_1和child2_2。 把child2_2顶部和child1_1在底部。

当您的jQuery（或其他）要求绝对的div，只需设置根据相对DIV（child1_1或child2_2）与显示：块和可见性：隐藏。 相对孩子仍然是无形的，但会使父母的股利较高。

Answer 4:

Feeela是正确的 ，但你可以得到一个父div收缩/扩张到一个子元素，如果你扭转你的div的定位是这样的：

.parent{
    postion: 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 */
}

这应该为你工作。

Answer 5:

我有一个类似的问题。 为了解决这个（而不是使用体，文件或窗口计算iframe的高度）我创建的包装整个页面内容（具有id =“页”，例如一个div）一个div，然后我用其高度。

Answer 6:

有能解决这个问题很简单的黑客

下面是说明了解决方案codesandbox： https://codesandbox.io/s/00w06z1n5l

HTML

<div id="parent">
  <div class="hack">
   <div class="child">
   </div>
  </div>
</div>

CSS

.parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }

你可以用黑客div的定位影响那里的孩子将自身定位发挥。

这里有一个片段：

 html { font-family: sans-serif; text-align: center; } .container { border: 2px solid gray; height: 400px; display: flex; flex-direction: column; } .stuff-the-middle { background: papayawhip url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67"); flex: 1; } .parent { background: palevioletred; position: relative; } .hack { position: absolute; left: 0; top:0; right: 0; } .child { height: 40px; background: rgba(0, 0, 0, 0.5); position: absolute; bottom: 0; left: 0; right: 0; } 

  <div class="container"> <div class="stuff-the-middle"> I have stuff annoyingly in th emiddle </div> <div class="parent"> <div class="hack"> <div class="child"> I'm inside of my parent but absolutely on top </div> </div> I'm the parent <br /> You can modify my height <br /> and my child is always on top <br /> absolutely on top <br /> try removing this text </div> </div> 

Answer 7:

我想出了另一种解决方案，我不爱，但能够完成任务。

基本上重复这样的子元素的重复是不可见的。

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

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

Answer 8:

“你要么使用固定的高度，或者你需要涉及到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);

Answer 9:

有一个更好的办法，现在做到这一点。 您可以使用底部的性质。

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

Answer 10:

这非常类似于@ChrisC建议。 它不使用绝对定位的元素，但相对的。 或许可以为你工作

<div class="container">
  <div class="my-child"></div>
</div>

和你的CSS是这样的：

.container{
    background-color: red;
    position: relative;
    border: 1px solid black;
    width: 100%;
}

.my-child{
    position: relative;
    top: 0;
    left: 100%;
    height: 100px;
    width: 100px;
    margin-left: -100px;
    background-color: blue;
}

https://jsfiddle.net/royriojas/dndjwa6t/

Answer 11:

还要考虑未来的方法：

CSS：

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

此外，由于您要重新定位的div考虑电网的CSS

Answer 12:

随着纯JavaScript，你只需要检索您的高度static position的子元素.child1使用的getComputedStyle（）方法，则该检索值设定padding-top使用相同的孩子HTMLElement.style财产。

---

检查并运行下面的代码片段是什么上述我一个实际的例子：

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

Answer 13:

绝对定位的意见对自己没有被静态定位（最近的祖先position: static ），因此，如果您想对定位给定父绝对的观点，家长设置position ，以relative并给孩子position ，以absolute

Answer 14:

试试这个，这对我来说是工作

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

它将为孩子身高父高度

文章来源: Make absolute positioned div expand parent div height