2 divを動的にdivのサイズにするためのCSS/JavaScriptテクニック

Question

私は2つのdiv、メインコンテンツセクションとサイドバーを持っています。サイドバーの内容は、私はサイドバーのコンテンツの高さに一致するようにメインコンテンツを押し下げたいメインコンテンツその後、背が高い場合

何が起こるたいのは一番高いのdiv

と同じ高さにそれぞれのdivを強制されます主なコンテンツは、サイドバーのコンテンツその後、背が高い場合

+--------------------+----------+ 
| Main Content  | Sidebar | 
|     |   | 
|     |   | 
|     |   | 
|     |   | 
| END    |   | 
| __________________ |   | 
|     |   | 
|     |   | 
|     | END  | 
|     | ________ | 
+--------------------+----------+ 

は逆に、私はメインコンテンツの高さに合うようにダウンサイドバーのコンテンツをプッシュする

+--------------------+----------+ 
| Main Content  | Sidebar | 
|     |   | 
|     |   | 
|     |   | 
|     |   | 
|     | END  | 
|     | ________ | 
|     |   | 
|     |   | 
| END    |   | 
| __________________ |   | 
+--------------------+----------+  

だから、次のようになります。

+--------------------+----------+ 
| Main Content  | Sidebar | 
|     |   | 
|     |   | 
|     |   | 
|     |   | 
|     |   | 
|     |   | 
|     |   | 
|     |   | 
| END    | END  | 
| __________________ | ________ | 
+--------------------+----------+ 

Answer 1

希望するものはequal height columnsです。これはCSSのみで、JavaScriptを使用しないで行うことができます。

jQueryを含む他の方法があります。詳細については、this stackoverflow questionを参照してください。

Answer 2

はあなたの最も高いのdivの高さを推定するためにjQueryのか、別のフレームワークを使用し、それに応じて他の人に高さを設定できますか？

if($('#mainContent').height() >= $('#subContent').height()) { 
    $('#subContent').height($('#mainContent').height()); 
} 
else 
{ 
    $('#mainContent').height($('#subContent').height()); 
}