使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調整其高度絕對定位兒童

回答

相關問題