Question

我已经查看过这个问题的十几个问题和答案，但对我的情况似乎没有一个最好的答案。

我有一个包含三个垂直列的页面（http://awesomealbums.info/?1062/chris-cornell）。我希望这些列看起来是相同的高度，无论它们是否有足够的内容。

这三列是：

1）左侧的导航栏 2）中间的内容列 3）右侧的广告栏

实现这一目标的CSS / div选项是什么？

Answer 1

我最近找到了PERFECT解决方案。这确实需要使用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>

Answer 2

这是旧学校，但是http://www.alistapart.com/articles/fauxcolumns/

Answer 3

使用负边距'黑客'。

为每列提供-9999的边距底部和9999的填充底部，以及100％的高度。我不确定这是否是正确的方式。但是这个想法是，当一个容器扩展时，其他容器也会因100％高度而扩展，填充和边距工作使得边距隐藏在100％高度之外 - 谷歌为'负边距列'。

Alterantivly使用css-discuss来查看所有业界公认的构建3列布局的方法，有流动的例子 - http://css-discuss.incutio.com/wiki/Three_Column_Layouts

Answer 4

单向（因为你的列无论如何都是固定宽度）是使用定位（绝对是精确的）。使用此方法，您可以将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;
}

不确定它是如何跨浏览器的。

如何使三列高度相同？

4 个答案: