在窗口调整大小时动态更改div jquery的高度

Question

我在div元素中使用.each（）中的代码，找到一个子元素，根据其内容设置高度（高级？），它在页面加载时工作正常，但无法使用窗口调整大小，请帮忙

$('#col-main > div').each(function () {
    var tmpHeight = 0;
    $(this).find("h2").each(function() {
        tmpHeight = $(this).height() > tmpHeight ? $(this).height() : tmpHeight;
    });
    $(this).find("h2").height(tmpHeight);
});

从此代码在页面加载上添加工作代码，我得到一行（“ .box”）中较高的div（列）“。demographcont”的高度，我将该行设置为同一高度“ .demographcont”中的其他div。 它适用于所有行。

不适用于窗口大小调整，其重置高度和高度将根据内容显示

页面刷新后调整窗口大小

/* code for adding height to div as per content */
    function setHeight() {
        $('.box').each(function () {
            var tmpHeight = 0;
            $(this).find(".demographcont").each(function () {
                tmpHeight = $(this).height() > tmpHeight ? $(this).height() : tmpHeight;
            });
            $(this).find(".demographcont").height(tmpHeight);
            // alert(tmpHeight);
        });
    }

    $(document).ready(function () {
        setHeight();
    });

    $(window).resize(function () {
        setHeight();
    });

HTML代码在这里

<div class="box clearfix">
    <div class="demographcont clearfix">
        <div class="grid_12">
            <div class="grid_5">
                <label>
                    Date of Birth:</label>
            </div>
            <div class="grid_7">
                18/06/2013
            </div>
        </div>
        <div class="grid_12">
            <p>
                content1</p>
        </div>
    </div>
    <div class="demographcont">
        <div class="grid_12">
            <p>
                content1</p>
            <p>
                content1</p>
            <p>
                content1</p>
            <p>
                content1</p>
        </div>
        <div class="grid_12">
            <p>
                content1</p>
            <p>
                content1</p>
            <p>
                content1</p>
            <p>
                content1</p>
        </div>
    </div>
</div>

.demographcont {边框：1px实线＃006599; 填充：0; 行高：20像素; }

Answer 1

好的，这是我从您的问题中得到的：

您想找到div.demographcont元素的最大高度并为其余元素设置此值。在页面加载后，我们将得到如下内容

<div class="box clearfix">
    <div class="demographcont" style="height:304px">...</div>
    <div class="demographcont" style="height:304px">...</div>
</div>

现在再次在调整窗口大小上您想做同样的事情，但是正如我在评论中告诉您的那样，这是不可能的，因为您已经设置了相同的内联高度。否则我不会回答您的问题。

因此，请尝试添加自动高度属性，然后执行其余的过程：

 function setHeight() {
    $('.box').each(function () {
        var tmpHeight = 0;
        $(this).find(".demographcont").each(function () {
        $(this).height('auto');
            tmpHeight = $(this).height() > tmpHeight ? $(this).height() : tmpHeight;
        });
        $(this).find(".demographcont").height(tmpHeight);
        // alert(tmpHeight);
    });
}