jquery - スタック div を使用したフロー レイアウト

Question

2 つの列を持つ Web サイトを構築しようとしています。左の列には 2 つの div があり、右の列には 4 つの div があります。各 div の高さは任意です。垂直スクロールバーが本体に表示されることはありません。いずれかの列の個々の div のみ。各 div は、列の垂直方向のスペースをすべて占有するまで、スクロールせずにできるだけ小さくする必要があります。その場合、コンテンツが最も多い div が最初にスクロールを開始し、2 番目にコンテンツが多い div が 2 番目にスクロールを開始する、というようになります。

CSS レイアウトが理想的ですが、jQuery もうまく機能します。

編集

私はこのようなことをするためにそれを探しています: http://jsfiddle.net/CkgxD/。（ウィンドウのサイズを縦方向に変更してアイデアを得てください。）私は今、Javascript ソリューションを持っています...それは私が望んでいたよりも複雑です。悪い習慣、コードのにおいなどを気軽に指摘してください。私は Web 開発にまだ慣れていません。

Answer 1

body {
  overflow: hidden;
}

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

div.inside {
}