CSS垂直高度與位置：絕對

Question

我有這個簡化的骨架結構：

<div id='parent"> 
    <div id="content"> 
     <div id="child-1"></div> 
     <div id="child-2"></div> 
     <div id="child-3"></div> 
    </div> 
</div> 

我想父格擴展到最高孩子的身高。只要孩子沒有立場，我就可以做到這一點：絕對的，這是我所需要的。

當孩子們被設置爲絕對的時候，父母的身高不再受孩子身高的影響。

是否有解決方法？

謝謝

Answer 1

您可以使用JavaScript解決此問題。 或位置：相對 http://plugins.jquery.com/project/Tallest 它可能有用

Answer 2

在這種情況下，您有幾個選項。

第一種是使用{position：relative}而不是絕對。這使元素保持在頁面的流動中，並且父項將以您正在查找的大小進行渲染。

另一種選擇是使用一點javascript來查找每個孩子的大小，確定哪個孩子最大，然後將父母設置爲該高度。

var children = document.getElementById('content').getElementsByTagName('div'); 

var max_child_height = 0; 
for(i = 0; i < children.length ; i++){ 
    if(children[i].offsetHeight > max_child_height) { 
     max_child_height = children[i].offsetHeight; 
    } 
} 

document.getElementById('parent').height = max_child_height; 

Answer 3

我假設child-N元素並排放置。當你使用絕對定位來做到這一點時，你也可以使用float：left來做到這一點。通過這種方式（清除之後）父代將具有最高子元素的高度。

#child-1, #child-2, #child3 { 
    width: 200px; 
    float: left; 
} 
/* now clear the float, otherwise #content would have no height*/ 
#content { 
    overflow:hidden;/*normal browsers*/ 
    zoom:1;/*IE fix*/ 
}