2009-07-17 3 views
4

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

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

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

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

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

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

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

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

答えて

3

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

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

+0

私は最も高いdivのサイズを知らないので、私はより動的にする必要があります。 –

+0

CSSソリューション*は*動的ですが、2つの列は常に同じ高さになります。 – DisgruntledGoat

3

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

if($('#mainContent').height() >= $('#subContent').height()) { 
    $('#subContent').height($('#mainContent').height()); 
} 
else 
{ 
    $('#mainContent').height($('#subContent').height()); 
} 
関連する問題