다른 div의 높이를 기준으로 div 크기 조정

Question

나는 현재 here 게시 된 유사한 작업을하고 있습니다. 그러나 어떤 이유로 뷰포트/브라우저 창이 크기가 조정될 때 작동하지 않습니다. 내 CSS에 뭔가가 있거나 뭔가 다른 것이 있는지 확실하지 않습니다. 나는 그것이 아래로 슬라이드하면 숨겨진 DIV의 높이를 일치하도록 왼쪽 열 (LFT-COL)를 얻으려고

$(document).ready(function() { 

$('.more').hide(); 

$('.link').click(function() { 
    $(this).next('.more').slideToggle(); 
}).toggle(function() { 
    $(this).children("span").text("[-]"); 
}, function() { 
    $(this).children("span").text("[+]"); 
    return false; 
}); 
var maxHeight = 0; 
$('div.simultaneously').each(function(index) { 
    if ($(this).height() > maxHeight) { 
     maxHeight = $(this).height(); 
    } 
}); 
$('div.simultaneously').height(maxHeight); 
});​ 

:

여기 내가 사용하고 코드입니다. 전반적으로 뷰포트 크기를 조정하면 왼쪽 열 div에 브라우저의 전체 높이가 표시됩니다. 숨겨진 div가 아래로 미끄러지는 경우 스크롤이 있으면 왼쪽 열 div를 오른쪽 열의 높이와 일치 시키길 원합니다 div가 나타납니다. 사람이 접근 할 수있는 다른 방법이있는 경우 http://jsfiddle.net/sLVsR/5/

, 나뿐만 아니라 그것을 위해 모든 이니

여기 내 바이올린입니다.

Answer 1

은 다시 읽어 귀하의 질문에, 나는 당신의 코드에

jQuery를

$(document).ready(function() { 

    $("div.lft-col").height($(window).height()-20); //I've put in -20 just so you can see the div shadow 

    $('.more').hide(); 

    $('.link') 
     .click(function() { 
      $more = $(this).next('.more'); 
      $more.slideToggle('slow', function() { 
       if ($more.is(":visible")) 
        $("div.lft-col").height($(document).height()-20); 
       else 
        $("div.lft-col").height($(window).height()-20); 
      }); 
     }) 
     .toggle(function() { 
      $(this).children("span").text("[-]"); 
     }, function() { 
      $(this).children("span").text("[+]"); 
      return false; 
     }); 

    $(window).resize(function(){ 
     $("div.lft-col").height($(document).height()-20); 
    }); 

});​ 

CSS

#container { 
    /*height: 100%;*/  
} 

DEMO