3列を同じ高さにする方法は？

Question

私はこの問題に関して十数個の質問と回答を見ましたが、自分の状況に一番良い答えはないようです。

3つの縦の列を持つページ（http://awesomealbums.info/?1062/chris-cornell）があります。適切なコンテンツがあるかどうかにかかわらず、列が同じ高さに見えるようにします。

3つの列があります：

1）左 2）中間 3の内容欄）右側の広告欄のナビゲーションコラムCSS/divのオプションは何

これが起こるようにするには？

Answer 1

それは古い学校ですが、（あなたの列がとにかく幅が固定されているため）http://www.alistapart.com/articles/fauxcolumns/

Answer 2

一つの方法は、（絶対的な正確には）ポジショニングを使用することです。この方法を使用すると、CSSのルールを次のように変更できます。

#PagePad { 
    background: white; 
    position: relative; 
} 

#Column_1_3 { 
    border-left: 1px #7D7D7D SOLID; 
    width: 175px; 
    text-align: right; 
    padding: 10px; 
    background: white; 
} 

#Column_2_3 { 
    width: 540px; 
    border-left: 1px #7D7D7D SOLID; 
    border-right: 1px #7D7D7D SOLID; 
    float: left; 
    padding: 20px; 
    background: white; 
    margin: 0px; 
    position: absolute; 
    margin-left: 196px; 
    bottom: 0px; 
    top: 0px; 
} 

#Column_3_3 { 
    width: 180px; 
    border-right: 1px #7D7D7D SOLID; 
    background: white; 
    float: left; 
    text-align: center; 
    margin-left: 778px; 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
} 

どのようにクロスブラウザであるかはわかりません。

Answer 3

マイナスマージン「ハック」を使用してください。

各列に-9999のマージンボトムと9999のパディングボトムと100％の高さを付けます。それが正しい方法であるかどうかは分かりません。しかし、1つのコンテナが拡大するにつれて、100％の高さ、余白が100％の高さの外側に隠れるようなパディングとマージンの作業によって、他のものもすべて拡大されます。

Alterantivly使用CSS-議論するすべての産業が3列レイアウトを構築するための方法を認識して見るために、流体の例がある - http://css-discuss.incutio.com/wiki/Three_Column_Layouts

Answer 4

私は最近、完璧なソリューションを見つけました。これはJavaScript/jQueryの使用を必要とします。基本的に、ページが読み込まれると、すべてのdivの自然な高さを取得します。各divの最高の自然な高さを選択します。すべてのdivをその高さに設定します。

<style> 

body { 
    font-size: .9em; 
} 
#ProductWrapper { 
    width: 620px; 
    float: left; 
} 
.ProductDiv { 
    width: 200px; 
    float: left; 
    background: rgb(240,240,240); 
    margin: 1px; 
    overflow: auto; 
} 

<div id="ProductWrapper"> 
<div class="ProductDiv" data-nat-height=''>asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf</div> 
<div class="ProductDiv" data-nat-height=''>asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf </div> 
<div class="ProductDiv" data-nat-height=''>asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf </div> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 

// GET MAX NAT HEIGHT 
var MaxHeight = 200; 
$(".ProductDiv").each(function() { 
    var Height = $(this).height(); 
    if (Height > MaxHeight) { 
     MaxHeight = Height; 
    } 
    $(this).attr("data-nat-height", Height); 
}); 
// SET TO MAX HEIGHT 
$(".ProductDiv").css("height", MaxHeight+"px"); 

}); 
</script>