获取div的高度，所有这些都在一个隐藏的div中

试着看看jQuery：获取jQuery 中隐藏元素的高度

关于这个问题，有很多好帖子。

您可以在jQuery获得元素的高度后隐藏div。

HTML（减去样式）

<div id="hiddenParent">
  <div class="childDiv">child div 1</div>
  <div class="childDiv">child div 2</div>
  <div class="childDiv">child div 3</div>
</div>​

JQ

var height = $(".childDiv").height();
$("#hiddenParent").hide();
alert(height);​

http://jsfiddle.net/charlescarver/2Ndte/

_{注意：这段代码只是一个例子，只会得到第一个子元素的高度，但你会得到如何获得隐藏元素高度的要点}

派对迟到了，但无论如何我都会接受这个。下面的解决方案是用Vanilla Javascript编写的，但同样的逻辑显然也适用于jQuery。

元素不一定需要是可见的才能被测量，它们只需要而不是为display: none;。显示：在计算样式中，none表示0高度，因此我们必须找到一个解决方法。

我们可以通过两个简单的步骤来模拟display:none：

1. 我们设置了visibility:hidden（因此元素不可见）
2. 我们设置position:absolute（因此元素不占用空间）

然后，我们将其display设置为block（或者空字符串，只要不是none就没关系）。然后，我们将有一个不可见的div，它将在文档中不占用空间，但将保留自己的原始维度。这样，即使之前在css中没有设置维度，也可以通过JavaScript完全访问它。

在一个循环中，我们将对每个需要的div运行getComputedStyle，查找其高度。

 // start loop
 getComputedStyle(el).getPropertyValue('height');
 // end loop

如果在循环结束时仍需要将显示设置为无，则可以恢复它。这个脚本其实并不复杂，运行时没有任何闪烁。

这是一个演示。

var par = document.getElementById('hiddenParent'),
    cd = par.querySelectorAll('.childDiv'),
    len,
    heights = [],
    i;
function getHeight(){
    len = cd.length;
  // 1.we hide the parent
    par.style.visibility = 'hidden';
  // 2. we set its position to absolute, so it does not 
  // take space inside the window
    par.style.position = 'absolute';
  // 3. we set its display to block so it will gain back its natural height
    par.style.display = 'block';   
  // 4. we start looping over its children
    while(len--){
  // we get the height of each children... here we're just storing them in array,
  // which we will alert later
      heights[len] = window.getComputedStyle( cd[len] ).getPropertyValue('height');
    }
  // 5. Job is done, we can bring back everything to normal (if needed)
    par.cssText = 'display: none';   
}
document.getElementById('starter').addEventListener('click',function(){
   getHeight();
   alert(heights);
});

#hiddenParent, .another-div{
    background: teal;
    width: 40%;
    padding: 20px;
    text-align: center;
    color: white;
    font-family: Arial;
    text-transform: uppercase;
    color: #ccc;
}
.childDiv{
    background: purple;
    padding: 10px;
    margin-bottom: 10px;
}
.another-div{
    background: orange;
    color: #1F9091;
}

<button id="starter"> Calculate heights </button>
<!-- hiddenParent is between two other divs but takes no space in the document as it's display:none -->
<div id="hiddenParent" style="display: none;">
  <div class="childDiv">child div 1</div>
  <div class="childDiv">child div 2</div>
  <div class="childDiv">child div 3</div>
</div>
<div class="another-div">
    here's another div
</div>