2 div에서 작동하는 CSS 최소 높이를 가져올 수 없습니다

Question

내 CSS 최소 높이로 힘든 시간을 보내고 있습니다. 두 div가 있는데, 그 중 하나가 확장되면 다른 것이 좋겠다고 말했습니다. 확장하려면 http://www.willruppelglass.com/

왼쪽에서 볼 수 있듯이 SideBar는 최소 높이에서 확장을 멈추고 내용 div는 최소 높이를 넘어 확장됩니다.

CSS

.leftSideBar{ 
    background:url(../images/leftSide.jpg) repeat-y; 
    float:left; 
    margin-top: -49px; 
    min-height: 591px; 
} 
.contentWrapper{ 
    background-color:#ebebeb; 
    width:1411px; 
    margin:0 auto; 
    position:relative; 
} 
.content{ 
    background:#FFF; 
    width: 1100px; 
    margin:0 auto; 
    position:relative; 
    min-height: 591px; 
} 

HTML

<div class="contentWrapper"> 
    <div class="content"> 
     <div class="leftSideBar"> 
      <img src="images/leftSideTop.jpg" width="170" height="78" border="0" /> 
     </div><!--leftSideBar--> 
    </div><!--content--> 
</div><!--contentWrapper--> 

Answer 1

이 일어나고있는 이유는 콘텐츠 DIV의 내용은 최소 높이를지나 추진하고 있지만, 실제로 내용을 가지고 있지 탐색 남아 있기 때문입니다 이유가 없다 더 커지기.

제 생각에는 정확히 div가 일치하도록 왼쪽 div의 CSS 속성을 동적으로 조정하는 jQuery의 간단한 부분을 사용합니다 (이미 사용하고있는 것으로 알고 있기 때문에). JQuery와 버전은 여기에 있습니다 :

var div_height = $("#content").height(); 
$(".leftsidebar").css("height":div_height); 

난 당신이 작업이 DIV에 ID를 할당해야합니다 귀하의 기존 코드에 존재하지 않는 내용에 ID를 사용하고 있습니다.

이 정보가 도움이되기를 바랍니다.

Answer 2

왼쪽으로 떠있는 첫 번째 영역이 있습니다. float을 사용할 때마다 다양한 브라우저에서 다르게 작동 할 수 있으므로 필자는 주요 요소에 대한 모든 비용을 들여 그런 종류의 물건을 피합니다.

div가 서로 독립적 이도록하려면 중첩하지 마십시오. "display"및 "position"과 같은 CSS 속성을 사용하여 위치를 직접 제어 할 수 있습니다. div가 서로 상호 작용하는 것으로부터 분리되면 개별적으로 div를 개별적으로 제어 할 수 있습니다.