獲取要複製的子元素的總高度

Question

我有一個固定位置#header，其中X爲.child元素，高度爲19px，隱藏溢出。 #header有一個:hover，它將高度更改爲max-height（因此可以使用其中的.child元素進行擴展）以及動畫transition: max-height 0.2s 1s ease;。 （固定div不能隨着它的增長或縮小來操縱div），所以我想在#header以下製作position: relative div，它具有與#header相同的內容高度，它可以與#header:hover同時增長或縮小，但可以移動其他div在它下面用動畫。

我在Stackoverflow的其他帖子上找到了一個方法，幾乎​​可以做到see JSFIDDLE，只不過它將.child元素的所有高度統計在一起。我只需要#parent的高度，但這是一個不是固定高度的max-height。

[更新]解決由於@喬爾 - 阿爾梅達 因爲DIV有短路的高度和隱藏的溢出它無法讀取div的高度，但與添加的.scrollHeight它可以讀取的高度div無論是否隱藏可見。

Answer 1

爲什麼要計算所有兒童身高時，你可以直接得到父母身高？

試試這個：

$(function(){ 
 
    var totalHeight = 0; 
 
    totalHeight = $('#parent')[0].scrollHeight; 
 
    alert("Total height of all divs: " + totalHeight); 
 
    $(".clonechild").height(totalHeight); 
 
});

#parent { 
 
    float: left; 
 
    width: 500px; 
 
    background-color: #e0e0e0; 
 
} 
 
#parent .child { 
 
    float:left; 
 
    height:100px; 
 
    width:100px; 
 
    background-color:#666; 
 
    box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    border: 1px solid black; \t 
 
} 
 
#parent .child , .clonechild p { 
 
    font-size: 14px; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 
     #cloneparent { 
 
      position: absolute; 
 
      margin: 300px auto auto 0px; 
 
      width: 510px; 
 
      background-color: #e0e0e0; 
 
     } 
 
     #cloneparent .clonechild { 
 
      float:left; 
 
      min-height:100px; 
 
      height: ; 
 
      width:100px; 
 
      background-color:#666; 
 
      box-sizing:border-box; 
 
      -moz-box-sizing:border-box; 
 
      -webkit-box-sizing:border-box; 
 
      border: 1px solid black; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div class="child"><p>1</p></div> 
 
    <div class="child"><p>2</p></div> 
 
    <div class="child"><p>3</p></div> 
 
    <div class="child"><p>4</p></div> 
 
    <div class="child"><p>5</p></div> 
 
    <div class="child"><p>6</p></div> 
 
    <div class="child"><p>7</p></div> 
 
    <div class="child"><p>8</p></div> 
 
</div> 
 
<p>__#parent clearly not 800px height</p> 
 
<div id="cloneparent"> 
 
    <div class="clonechild"><p>this needs to be the same height as #parent</p></div> 
 
    <p>__#cloneparent clearly not same height as #parent</p> 
 
</div>