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