동적으로 설정 열 높이

Question

이 질문은 하나에 다음과 나는 최근 여기 질문 : Matching column height in 2column layout

내가 JQuery와 수정 제안을 적용,하지만 지금 문제가있는 해당 페이지로드에 표시되는 열 집합은 높이가 짧은 경우 왼쪽에있는 하위 메뉴 항목에서 선택한 것보다 다른 항목보다 내용 열의 텍스트가 바닥 글 위로 이동합니다.

http://www.pcbuddies.co.za/Services/Default.aspx 여기

코드입니다 (확인하기 위해 하드웨어 수리 링크를 클릭) : 나는 JQuery와 아마 이렇게하는 가장 좋은 방법은 아니다 알고

<!-- 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 --> 

,하지만 난 그냥 사용하려는 CSS 해결책을 적용하는 동안 빠른 수정으로.

#hardwareitem이 열 높이를 변경하지 않는 이유는 누구나 코드 또는 논리의 문제점을 볼 수 있습니까?

Answer 1

이 경우 JavaScript를 우회하는 것이 좋습니다. 거기 당신은 CSS를 찾고있는 무엇을 달성 할 수있는 가짜 열의라고 잘 알려진 접근 방식 :

이

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