0

我有一个从以下地址开始的网页：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;
}

我对如何让左栏显示红色背景全长页面感到困惑

我应该只使用固定宽度的侧边栏以使其更容易吗？

4

2 回答 2

0

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

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

于 2010-12-15T06:25:53.377 回答
0

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;
};

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

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

于 2010-12-15T06:27:24.380 回答