匹配2列布局中的列高 [英] Matching column height in 2column layout

问题描述

我的网站使用了2列，但是我能够得到列高度匹配的唯一方法是使用固定的高度，但是这提供了一个滚动条在滚动条问题，其中内容列必须 overflow：auto; 可以看到所有内容，但如果用户的浏览器不能使整个页面同时可见，页面和内容列都有滚动条。

My website uses 2 columns, but the only way I've been able to get the columns height to match is to use a fixed height, but this presents a "scrollbar in a scrollbar" issue where the content column has to have overflow: auto; for all the content to be seen, but if the user's browser doesn't make the entire page visible at once, both the page and the content column have scrollbars.

我想做的是将边栏列的高度与内容列的高度相匹配。
我想在页面加载设置一些javascript来做，但我不能帮助思考更好的方式。

What I would like to do is match the sidebar columns height to that of the content column. I was thinking of setting some javascript on page load to do it, but I can't help thinking theres a better way.

http://www.pcbuddies.co.za （供参考）。

任何建议将非常感谢。
提前感谢！

Any suggestions would be greatly appreciated. Thanks in advance!

编辑1

在应用下面的JQuery解决方案后，我很高兴与结果（大多数）。
其中我有一个问题是当每个页面（navbar）的第一部分（侧边栏）小于另一个部分请参阅 http://www.pcbuddies.co.za/Services/Default.aspx 。

EDIT 1
After applying the JQuery solution below, I'm happy with the result (mostly). Where I do have a problem is when the first section (sidebar) of every page (navbar) is smaller than another section see http://www.pcbuddies.co.za/Services/Default.aspx.

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

In this situation, the content is overflowing past the site's footer.

推荐答案

一个解决方案，但我正在改写一个更好的例子在这个网站这里，我发现工作非常好。

I wrote out a solution but I was paraphrasing a better example at this site here, which I find works very well. It uses a trick to create the equal height columns but works very well - without any javascript.

下面是一个操作示例：示例

Here's an example of it in action: example

这篇关于匹配2列布局中的列高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！