CSS等しい高さの列 - うわー！再び？

Question

ウェブデザインの歴史の中で、最悪の質問。誰が気にして、ちょうどオプションを選んでください。だから私の質問はこのようなものです...

標準に準拠し、（後方）ブラウザに対応するための最良の答えは何ですか？ CSSとHTML
OR
Negative margin、extra containers、または他のハッキング又は膨張のために予約されているものとするレイアウトに使用

jQuery？

既にこれに時間をかけていますが、それを行う「プロフェッショナルな」方法を探しています。

編集：アレクサンダーの方法を使用してcode exampleがあります。

Answer 1

通常私は99％の症例で働く純粋なCSS/HTMLのソリューションを使用します。

私は「Y」斧の背景リピートを持つ親のdivを持っています。一般的な構造は次のようになるだろう：

html: 

<div id="container" class="clearfix"> 

    <div class="LeftPane"></div> 
    <div class="CenterPane"></div> 
    <div class="RightPane"></div> 

</div> 

CSS：あなたはボーダーのための画像を適用することができ、またはユーザを作ることができるもの、他のすべては、考えるように背景画像用

#container{ 
    background:url(imagePath) 0% repeat y; 
} 

そのすべての3つのブロック同じ高さを持っている

Answer 2

私はfaux columnsと付く傾向があります。

Answer 3

に成功していることを行うための多くの方法がありますが、私はそれらの最も簡単な1が単に共通の親コンテナでそれらすべてを包むことだと思い、全く親のための彼のdisplaytableまたはtable-row不要に設定されていません。元の<div>をdisplay: table-cell;

jsFiddleに設定します。

Answer 4

互換性のためにjQueryを提案します。ハックや余分なコンテナは、あなたが言ったように、あなたのコードを膨らませてしまい、変更が必要な場合には編集が難しくなります。とにかく、HTMLはページのレイアウトです。

Answer 5

私は同じ高さの列のための革命的な新しい方法を考え出しました。最新のChrome、Firefox、IE7-9でテストされた純粋なCSS/HTMLソリューションです。それは設定するのは少しトリッキーですが、それが完了したらそれは美しく動作します。私が見たすべての以前の解決策の問題は、実際には境界線、余白などを持つ個々のサイドバイサイドdivを作成しないということです。他のソリューションでは常にいくつかの列が重なっています。バックグラウンドを変更して別の列を作成します。このメソッドは、いくつかのメソッドとは異なり、任意の列を任意の高さにすることができます。その成功の秘訣は左の代わりにfloat: rightを使用しています。左に浮かせた場合、右に余分なスペースがあり、スクロールバーが発生するという問題があります。おそらくこの方法の唯一の欠点は、あなたの頭を包み込むのが難しいかもしれないということです！

こちらをご覧ください。 http://jsfiddle.net/wRCm6/2/