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

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

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

Answer 2

Faux Columns是一项值得关注的技术。

但我个人选择使用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;
};

$（ '相等的高度。'）equalHeights（）;

同等高度的95％兼容性对我来说已经足够了。如果没有，我使用人造柱。虽然我认为当浏览器赶上时，这个问题应该完全取消HTML5 / CSS3。

Div高度修复基于％的列

2 个答案: