我正在计算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>
这是CSS问题，原因是结构上的页边空白（阅读“父级和第一个/最后一个孩子”的情况）div>h2。由于div容器没有任何填充，边距或边框，因此它们的边距会收缩以容纳内部边距。简单的解决方法是在它们或边框上设置一些填充或设置h2为内嵌块。
另一个问题是，如果没有足够的空间，则应将contentheight设置为rest。
if (content.outerHeight() > rest) {
content.css('height', rest);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句