누적 된 div가있는 레이아웃 레이아웃

Question

두 개의 열이있는 웹 사이트를 만들려고합니다. 왼쪽 열에는 두 개의 div가 있고 오른쪽 열에는 네 개의 div가 있습니다. div의 각각은 어떤 높이라도 가질 수 있습니다. 수직 스크롤바는 절대로 본체에 나타나서는 안됩니다. 두 열의 개별 div에서만 div의 각 항목은 열의 모든 수직 공간을 차지할 때까지 스크롤하지 않고 가능한 한 작아야합니다. 이 경우 가장 내용이 많은 div가 먼저 스크롤되고 두 번째 내용이있는 div가 두 번째 스크롤을 시작합니다.

CSS 레이아웃이 이상적이지만 jQuery도 훌륭하게 작동합니다. http://jsfiddle.net/CkgxD/ : 그것은 같은 것을 할 수 있도록

편집

내가 찾고 있어요. (아이디어를 얻으려면 창 크기를 세로로 조정하십시오.) 저는 지금 자바 스크립트 솔루션을 가지고 있습니다 ... 내가 기대했던 것보다 더 복잡합니다. 악의적 인 사례, 코드 냄새 등을 자유롭게 부르십시오. - 저는 여전히 웹 개발에 익숙하지 않습니다.

Answer 1

body { 
    overflow: hidden; 
} 

div.columns { 
    width: 50%; 
    float: left; 
    overflow: hidden; 
} 

div.inside { 
}