2列布局中的匹配列高

Question

我的网站使用 2 列，但我能够使列高度匹配的唯一方法是使用固定高度，但这会出现“滚动条中的滚动条”问题，其中内容列必须具有overflow: auto; 用于查看所有内容，但如果用户的浏览器没有立即显示整个页面，则页面和内容列都有滚动条。

我想做的是将侧边栏列的高度与内容列的高度相匹配。 我正在考虑在页面加载时设置一些 javascript 来执行此操作，但我不禁想到有更好的方法。

有问题的网站是http://www.pcbuddies.co.za（供参考）。

任何建议将不胜感激。 提前致谢！

编辑 1
应用下面的 JQuery 解决方案后，我对结果很满意（大部分）。 我确实遇到问题的地方是每个页面（导航栏）的第一部分（侧边栏）小于另一个部分see @987654322@。

在这种情况下，内容会溢出网站的页脚。

Answer 1

我写了一个解决方案，但我在此站点 here 上解释了一个更好的示例，我发现它非常有效。它使用一种技巧来创建等高的列，但效果很好 - 无需任何 javascript。

下面是它的一个例子：example

Answer 2

其他解决方案对我来说有点太复杂了。这个怎么样：

将两列都设置为透明背景，并为它们创建一个容器，并将所需背景设置为 alpha 透明 png。

也许不是“最干净”的解决方案，但绝对是一个简单的解决方案。看看你链接的网站，这就是我想要的。

Answer 3

我总是因为提出这个建议而感到悲痛，但我发现最好、最可靠的方法是利用 Javascript（在本例中为 jQuery）使所有列的高度与最高列的高度相同。请参阅我的实时示例。

现场演示 http://jsfiddle.net/T9VUc/1/

如果您想在页面加载时执行此操作，请尝试此操作。请记住，此过程使用jQuery，因此您需要将其包含在您的页面中

var tallest=0;

$(document).ready(function() {
    $('.col').each(function(){
        if($(this).height() > tallest)
           tallest = $(this).height();
    });
    $('.col').css('height', tallest + 'px');
});

页面加载时的现场演示 http://jsfiddle.net/T9VUc/2/

更新

根据您给我的网址，我建议像这样将<div style='clear:both'></div> 添加到您的第二个 div 的末尾...

<div id="Side" class="col">
    ...
</div>
<div class="content col">
    ...
    <div id="network" style="display: none;">
        ...
    </div>

    <div style='clear:both'></div>
</div>