如何使三列的高度相同？

Question

我已經查看了一下這個問題的一些問題和答案，但是對於我的情況似乎沒有一個最好的答案。

我有一個頁面（http://awesomealbums.info/?1062/chris-cornell）與三個垂直列。我希望列看起來是相同的高度，無論是否有足夠的內容。

三列：

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％的高度。我不確定這是否正確。但是這個想法是，隨着一個容器擴展，其他容器也將全部擴展，因爲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>