基于 % 的列的 Div 高度修复

Question

我有一个从以下地址开始的网页：http://digitalgenesis.com。 au/my%20sites/Digital%20Genesis/

基本上，我在使用 2 个流体容器的 2 列布局之后，将背景颜色均匀地显示到页脚。

然而，目前左栏仅在大量文本周围显示背景。下面列出了 2 列及其包含的 div 的代码，

#container{
 overflow: hidden;
 width: 100%;
}

#col1{
 float: left;
 width: 60%;
 background:red;
}

#col2{
 float: left;
 width:40%;
 background:blue;
}

我很困惑如何让左列显示红色背景全长的页面，

我应该求助于固定宽度的侧边栏以使其更容易吗？

Answer 1

在 jsFiddle 上查看此示例。这种方法的工作原理是将背景与内容分开处理。它为每列引入了一个绝对定位的背景 div。背景使用百分比定位在浮动内容后面，并调整大小以填充父容器的高度。

注意：尽管我的示例托管在 jsFiddle，但此方法不涉及任何 javascript。它仅使用CSS。

Answer 2

假列是一项值得研究的技术。

但我个人选择使用 javascript，因为它太简单了。

$.fn.equalHeights = function(px) {
    $(this).each(function(){ 
            var currentTallest = 0;
            $(this).children().each(function(i){
                    if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
            });
            if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
            // for ie6, set height since min-height isn't supported
            if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
            $(this).children().css({'min-height': currentTallest}); 
    });
    return this;
};

$('.equal-height').equalHeights();

大多数时候，同等高度 95% 的兼容性对我来说已经足够了。如果没有，我使用假列。尽管我相信当浏览器迎头赶上时，这个问题应该会在 HTML5/CSS3 中完全消失。