jquery - 使用jquery高度动态获取两个嵌套框的高度？

Question

我想根据内容的长度动态获取框(在我的示例中为黄色背景)的高度。所以如果它有一个长文本，它的高度会增加。这个黄色盒子有一个父容器(在我的例子中是蓝色背景)。

我不明白的是为什么它们具有相同的高度 - 即 100？

蓝色框应该有更大的数字，因为它有padding top 20px 和padding bottom 20px。因此，如果黄色框为 100，则蓝色框应为 140。

j查询，

// Set the object.
var object = $(".box");
//var object_height = parseInt(object.css('min-height'),10) || parseInt(object.css('height'),10);
var object_height = object.height();

var scrollable = $(".scrollable");
//var scrollable_height = parseInt(scrollable.css('min-height'),10) || parseInt(scrollable.css('height'),10);
var scrollable_height = scrollable.height();

alert(object_height);
alert(scrollable_height);

html,

<div class="box">

    <div class="scrollable">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</div>

链接来自 jsfiddle .

任何想法如何让这个正确？

Answer 1

你应该使用 outerHeight() 方法，它计算高度 + 边距/填充