Question

我有一个固定位置#header，其中包含.child个X元素，高度为19px，隐藏溢出。 #header有一个:hover，它将高度更改为max-height（因此它会随着.child元素展开）和动画transition: max-height 0.2s 1s ease;。（固定div在增长或缩小时不能操纵div），所以我想在position: relative以下#header div，其内容高度与#header相同与#header:hover同时增长或缩小，但可以通过动画移动其下方的其他div。

我在Stackoverflow上的其他帖子上找到了一种方法，它几乎完成了诀窍see JSFIDDLE，除了它将.child元素的所有高度统计在一起。我只需要#parent的高度，但max-height不是固定的高度。

[更新]求助于@ joel-almeida 因为div有一个短的高度和隐藏的溢出，它无法读取div的高度但是添加了.scrollHeight它可以读取div的高度，无论它是否隐藏可见。

Answer 1

为什么在可以直接获得父高的情况下计算所有孩子的身高？

试试这个：

＆＃13;

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

＆＃13;

#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;	
}
#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;   
        }

＆＃13;

<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>

＆＃13;

获取要复制的子元素的总高度

1 个答案: