Получить общую длину дочерних элементов для дублирования

Question

У меня есть фиксированное положение #header с X из .child элементов в нем с высотой 19 пикселей и скрытым переполнением. #header имеет :hover, который меняет высоту на max-height (поэтому он расширяется с элементами .child) и с анимацией transition: max-height 0.2s 1s ease;. (фиксированные divs не могут манипулировать divs вокруг по мере его роста или сжатия), поэтому я хотел бы сделать position: relative div ниже #header, который имеет ту же самую высоту контента, что и #header, которая растет или сжимается то же самое время, что и #header:hover, но может перемещать другие divs под ним с анимацией.

Я нашел способ на других сообщениях в Stackoverflow, который почти сделал трюк see JSFIDDLE, за исключением того, что он подсчитывает все высоты элементов .child. Мне нужна только высота #parent, но это max-height не фиксированная высота.

[обновление] РЕШЕННЫЕ благодаря @ Joel-Алмейд Поскольку ДИВ имел короткозамкнутую высоту и скрытый перелив не удалось прочитать высоту 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>