動的に設定柱の高さ

Question

は、この質問は、1からの次の私は最近、ここに尋ねた：Matching column height in 2column layout

私はjQueryの修正を提案適用が、私は今問題を抱えているそのページの負荷に提示列セットは、高さが短い場合左側のサブメニュー項目で選択されている別のものよりも、コンテンツ列のテキストがフッター上に表示されます。

http://www.pcbuddies.co.za/Services/Default.aspx（見るためにハードウェア修理のリンクをクリックしてください）

ここでは、コードです：

<!-- JQuery matches the height of one column to the height of the other --> 
<script type="text/javascript" src="../Data/jquery.js"></script> 
<script type="text/javascript"> 
    var tallest=0; 
    $(document).ready(function(){ 
     $('.col').each(function(){ 
      if($(this).height() > tallest) 
       tallest = $(this).height(); 
     }); 
     $('.col').css('height', tallest + 'px'); 
    }); 

    // I had an idea to reset the column matching for the hardware repair 
    // menuitem click which didn't work. 
    $('#hardwareitem').click(function(){ 
     $('.col').each(function(){ 
      if($(this).height() > tallest) 
       tallest = $(this).height(); 
     }); 
     $('.col').css('height', tallest + 'px'); 
    }); 
</script> 

<li id="hardwareitem"><a onclick="cycle('hardware');">Hardware Repair</a></li> 

<div id="hardware" style="display: none;"><!-- Content goes here --></div> 

<!-- JS to change content is simply css class changes to make the selected content visible while hiding the currently visible content --> 

私はjQueryのは、おそらくこれを行うための最善の方法ではないですけど、私はちょうど使用したいが、クイックフィックスとして、CSSソリューションを適用しています。

#hardwareitemが列の高さを変更しない理由を示すコードまたはロジックの問題を誰にでも見られますか？

Answer 1

この場合、JavaScriptをバイパスすることをお勧めします。あなたはCSSで探しているものを達成することができます偽の列のと呼ばれるよく知られたアプローチがあります：

http://www.alistapart.com/articles/fauxcolumns/