0

流体の等しい高さのカラムレイアウトに問題があります。

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で設定された高さをリセットする必要があると思いますが、どうすればよいですか？

ありがとう！

4

1 に答える 1

0

これを参照してください：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;
    }
于 2013-01-09T09:12:59.043 に答える