使div调整其高度绝对定位儿童

我有一个div元素（默认定位）包含和h1和一个链接，它们都有绝对定位。自然，div元素高度崩溃。我如何让div元素调整到它的两个孩子的身高？我已经尝试过标准的clearfixes，将溢出设置为auto，并将div的位置设置为relative（这是我发现的另一个帖子的建议），但没有一个能够工作。使div调整其高度绝对定位儿童

我做了一个jsfiddle，说明我的问题。

HTML代码：

<div> 
    <h1>the div doesnt go around this element</h1> 
</div>

CSS代码：

div {border: 2px solid;} 
h1 {position: absolute;}

来源

2017-02-14 Lukeception

你能表现出一定的代码？ – Mark

似乎它有一个JavaScript的答案[这里]（http://stackoverflow.com/a/9061682） –

这是预期的行为。为什么你需要h1绝对的位置：绝对？ :) .... **也许你需要绝对位置的div而不是它的子女** –

使用最小宽度为DIV在CSS中，使得它涵盖了儿童所需的高度。

来源

2017-02-14 16:08:12

现在你只是假设这些高度是不可变的。 – Mart

他们是。但在这种情况下，由于只有2个元素存在，因此可以假定为常量。 –

我做了的jsfiddle帮助您使用jQuery来解决这个问题： https://jsfiddle.net/9hubfbxt/

html代码：

<div id="parent"> 
    <div id="child1" class="child"> 

    </div> 
    <div id="child2" class="child"> 

    </div> 
</div>

jquery的：

var height = 0; 
$("#parent .child").each(function() { 
    height = height + $(this).outerHeight(true); 
}); 

$("#parent").height(height);

现在的高度可以是任何东西取决于里面的东西。

编辑：我编辑您的jsfiddle我的jQuery的解决办法：https://jsfiddle.net/4yuco4cL/1/

来源

2017-02-14 16:22:19 Mart

我的目标是解决它只是使用CSS，但如果我不会找到任何我可能会使用您的jQuery代码。 – Lukeception

得到了，但那么你唯一的解决方案是或者使元素相对，如你所说你不想..或者你必须知道内部元素的高度，并将这些高度组合为高度家长。 – Mart

使div调整其高度绝对定位儿童

回答

相关问题