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