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（在div>h2结构上阅读＆＃34;父和第一个/最后一个孩子＆＃34;案例），这是CSS问题。由于div容器没有任何填充，边距或边框，因此它们的边距会缩小以适应内边距。简单的解决方法是在它们或边框上设置一些填充或将h2设置为内联块。

另一个问题是，如果空间不足，您应将content身高设置为rest。

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

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

如何完美地计算“儿童”身高

1 个答案: