如何完美地计算'children's`高度

Question

我正在计算childrens高度，将滚动条添加到容器。但它不是完美的。任何一个人都能帮助我完美地计算出儿童的身高？

这里是我的JS：

var p= "</p>Some testing text</p>"; 

var getAllHeight = function (content) { 
    var allHeight = 0; 
    $('#container').children().not('.content').each(function(){ 
     allHeight += $(this).outerHeight(true); 
    }); 
    return allHeight; 
} 

var addHeight = function() { 
    var content = $('.content'); 
    var allHeight = getAllHeight(content); 
    var rest = $('#container').innerHeight() - allHeight; 

    if(content.outerHeight() > rest) { 
     content.css('height', (content.outerHeight() - allHeight)); 
    } 

    console.log(allHeight, content.height(), content.outerHeight(),content.innerHeight()) 
}; 

$('button').click(function(){ 
    $('.content').append(p); 
    addHeight(); 
}); 

<div id="container"> 
    <div> 
     <h2>Heading</h2> 
    </div> 
    <div> 
     <h2>Heading</h2> 
    </div> 
    <div class="content"> 

    </div> 
    <div class="footer"> 
     Footer 
    </div> 
    <div class="button"><button>Add</button></div> 
</div> 

JSfiddle

Answer 1

这是由于collapsing margins CSS问题（读 “家长和第一/最后一个孩子” 的情况下）上div>h2结构。由于div集装箱没有任何填充，边距或边框，因此它们的边距会折叠以适应内边距。简单的解决方法是在它们或边界上设置一些填充或将h2设置为内联块。

另一个问题是，当没有足够的空间时，应该将content高度设置为rest。

if (content.outerHeight() > rest) { 
    content.css('height', rest); 
} 

演示：http://jsfiddle.net/doesfmnm/5/