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

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

1 个答案: