CSS - 带有背景色而不是重复背景图像的人造柱？

Question

问候，

我有一个两列（浮动）布局设置，其中列需要“看起来”，就像它们具有匹配的高度。 “较短”列具有背景颜色，并且需要看起来与扩展以适合其内容的主要内容列的高度相同。

我知道通过将重复的背景图像应用到两列的包装并清除下面两列的浮点数来实现此布局相对容易。这是实现效果的唯一方法，还是可以通过将背景颜色应用于“较短”列而不使用重复图像来实现此目的？

Answer 1

有一个包装div，其背景颜色与最短的浮动div相同。

HTML

<div id="wrap">
   <div id="longerDiv"></div>
   <div id="shorterDiv"></div>
</div>

CSS

#longerDiv {
   background:#9c9;
}

#wrap {
   background:#99c;
}

#shorterDiv {
   background:#99c;
}

Answer 2

晚了好，从来没有。认为这可能会有所帮助：

htmls

<div id="content"> 
    <div id="left"></div>
    <div id="right"></div>
</div>

csss

#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }

您可以查看此@ http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout

Answer 3

如果较短的列浮动，则无法设置基于百分比的高度。

但是，如果绝对定位，可以将基于百分比的高度设置为较短的列，但如果可以使用浮动布局执行此操作，我主要感到好奇。

Answer 4

1px高的GIF很小，只做人造柱。试图做你正在描述的只是乞求头疼和浏览器的不一致。

为什么要避免使用人造柱？

Answer 5

如果你真的不喜欢使用图像（为什么不只是有一个纯色的背景图像？），你可以使用一个真正的布局技术：http://www.positioniseverything.net/articles/onetruelayout/