jQuery：调整大小时流体布局中的等高列

Question

我在流体高度相等的列布局上遇到问题。

jQuery(function($){

        var qMetaHeight, qBodyHeight, qAnswerCount; 

        function gameResize() {

            qMetaHeight = $('.taskMeta').height();
            qBodyHeight = $('.taskBody').height();
            qAnswerCount = $('.answerCount').height();
            if( qMetaHeight > qBodyHeight ) {
                $('.taskBody').height(qMetaHeight);
            }
            else if ( qMetaHeight < qBodyHeight )  {
                $('.taskMeta').height(qBodyHeight);
                $('.bestMatches').height(qBodyHeight-qAnswerCount);
            }

            $('#test').html("taskMeta: " + qMetaHeight + "<br>taskBody: " + qBodyHeight + "<br>answerCount: " + qAnswerCount);
        };
        gameResize();
        $(window).resize(gameResize);

});

http://jsfiddle.net/klavina/QPkxu/1/

这在页面加载时效果很好，但是在页面调整大小时却失败了。

2个问题：

• 有时（并非总是如此），当减小窗口的宽度时，它根本根本不起作用： http : //grab.by/iRcm 。

• 当它起作用时，用户将窗口的尺寸减小很多，然后再次增大-高度保持最大： http : //grab.by/iRcq 。 我猜我需要首先重置jQuery设置的高度，我该怎么做？

谢谢！

Answer 1

看到这个： http : //jsfiddle.net/QPkxu/7/

jQuery(function($){

        var qMetaHeight, qBodyHeight, qAnswerCount; 
        var org_qMetaHeight = $('.taskMeta').height();
        var org_qBodyHeight = $('.taskBody').height();
        $('.taskBody').css("min-height", $('.taskMeta').height());
        function gameResize() {

            qMetaHeight = $('.taskMeta').height();
            qBodyHeight = $('.taskBody').height();
            qAnswerCount = $('.answerCount').height();
    $('.taskMeta').height(qBodyHeight);
    $('.bestMatches').height(qBodyHeight-qAnswerCount);
            //if( qMetaHeight > qBodyHeight ) {
                //$('.taskBody').height(qMetaHeight);
            //}
        //  else if ( qMetaHeight < qBodyHeight )  {          
                //$('.taskMeta').height(qBodyHeight);
                //$('.bestMatches').height(qBodyHeight-qAnswerCount);
            //}

            $('#test').html("taskMeta: " + qMetaHeight + "<br>taskBody: " + qBodyHeight + "<br>answerCount: " + qAnswerCount);
        };
        gameResize();
        $(window).resize(gameResize);

}); 

CSS：

    .taskBody {
        background: #f00;
        margin-right: 242px;
    }

    .taskMeta {
        float: right;
        width: 232px;
        background: #f00;
    }

    .answerCount {
        background: #000;
        color: #fff;
    }

    .bestMatches {
        background: #ccc;
    }