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

Question

I am using the code from .each() in a div element, find a child element, set height based on its content (advanced?) its working fine on page load but not working with window resize please help

$('#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);
});

Adding working code on page load from this code I get height of taller div (column) ".demographcont" in a row (".box") which i set to other divs in the row for same height ".demographcont". its worked for all rows.

Not worked on window resize its reset the height and the height will come as per content

after page refresh on window resize

/* 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 code here

<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{ border:1px solid #006599; padding:0; line-height:20px; }

Answer 1

OK this is what I got from your question :

You want to find maximum height of div.demographcont elements and set this value for the rest of elements .After page load we will have some thing like this

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

Now again on window resize you want to do the same thing but as I told you in comment it's not possible because you already set the same height inline.Otherwise I'm not getting your question.

So try adding auto height property then doing the rest of proccess:

 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);
    });
}