如何完美地計算'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/