Question

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

我想要做的是将侧栏列高度与内容列的高度相匹配。我想在页面加载上设置一些javascript来做到这一点，但我不禁想到有更好的方法。

相关网站为http://www.pcbuddies.co.za（仅供参考）。

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

编辑1
在应用下面的JQuery解决方案后，我对结果感到满意（主要是）。我遇到问题的地方是每个页面（导航栏）的第一部分（侧边栏）小于另一部分see http://www.pcbuddies.co.za/Services/Default.aspx。

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

Answer 1

我写了一个解决方案，但我在这个网站上here更好地解释了一个更好的例子，我发现它很有效。它使用一个技巧来创建相等的高度列，但工作得很好 - 没有任何JavaScript。

以下是其中的一个示例：example

Answer 2

我总是因为建议这一点而感到悲痛，但我发现最好，最可靠的方法是利用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>

Answer 3

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

将两列设置为透明背景，并为所有列创建一个容器，并将所需背景设置为alpha-transparent png。

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

匹配列高度为2列布局

3 个答案: