获得所有孩子的身高并将其应用于父母

Question

我正在尝试计算"height: auto" div的高度，然后将其应用于div。我这样做了：

function center(divName) {
    $(":animated").promise().done(function () {
        var totalHeight = 0;

        $(divName).children().each(function () {
            alert(totalHeight);
            totalHeight += $(this).height();
        });

        $(divName).css("height", totalHeight + "px");
    });
}

center("#frame_01");

HTML：

<div id="frame_01">
    <h1>Text</h1>
    <h2 id="next_frame_02">Continue</h2>
</div>

注意alert(totalHeight);，我使用它来测试脚本，问题是，脚本返回第一个0px的孩子，但第二个孩子正确。

我首先想到这是因为它在动画完成之前开始计算，因此没有得到第一个孩子的高度，所以我应用了$(":animated").promise().done(function() {所以脚本在计算之前等待动画完成。

但这没有解决它，有什么建议吗？

提前致谢！

编辑：

我想要实现的是以div为中心，但要做到这一点，我需要div的高度。这是CSS：

#frame_01 {
    text-align: center;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

使用background-color: red：

设置高度后

Answer 1

我通过将.height()更改为.outerHeight(true)

来解决了这个问题

代码：

function center(divName) {
    $(":animated").promise().done(function () {
        var totalHeight = 0;

        $(divName).children().each(function () {
            alert(totalHeight);
            totalHeight += $(this).outerHeight(true);
        });

        $(divName).css("height", totalHeight + "px");
    });
}

center("#frame_01");