基于 % 的列的 div 高度修复答案

【问题标题】：Div height fix for % based columns基于 % 的列的 div 高度修复
【发布时间】：2010-12-15 14:34:52
【问题描述】：

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

我很困惑如何让左栏显示一个红色背景的全长页面

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

【问题讨论】：

见matthewjamestaylor.com/blog/…这是一个常见的问题。
你不必这样做，但我个人总是将我的网站的 with 限制为一个洞，将所有内容居中（在大型显示器中，它不会延伸到“无限”，保持一切都井井有条）

标签： css html height fluid col

【解决方案1】：

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

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

【讨论】：

【解决方案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;
};

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

95% 的相同高度兼容性对我来说大部分时间已经足够了。如果没有，我使用假列。虽然我相信当浏览器迎头赶上时，HTML5/CSS3 应该会完全解决这个问题。

【讨论】：