具有匹配高度和背景图像的流体列

Question

我正在为我的网站使用页眉、页脚和两列中心区域的新布局。这两列包括主要内容区域，即流动高度和宽度，以及右侧边栏，即流动高度和固定宽度。我之前也做过类似的布局，但这个依赖于使用两个不同的背景图像（一个用于侧边栏，一个用于内容区域）。

有没有办法实现这一点，使用适当的 HTML 和 CSS，以便两列的背景图像始终具有相同的高度，而不管哪一列的内容更长？

我尝试使用 JavaScript 来模拟这一点，但如果内容区域中有图像，它就不能很好地工作。我真的不想以任何方式使用这种方法。

非常感谢任何帮助。

我在http://staging.jamesarmes.net/jimmyssandbox 设置了一个暂存环境以提供示例。这个环境不是我的成品，但我想在进一步移动之前控制容器。我已经在http://www.jamesarmes.net/files/jimmyssandbox-theme1.png 上发布了我的设计作品。

Answer 1

假设一个类似这样的 HTML 结构

#container
|-- #main-content
|-- #sidebar

您想使用faux columns，将重复背景应用到#container。只要每个都是垂直重复的背景，不存在每个需要在不可调和的高度重复的问题，您就可以直接使用它。

但是，既然你说主要内容区域是流动的，这就引入了一些问题。 "Creating Liquid Faux Columns" 可能对你有用。

或者，我会考虑使用常规的假列并牺牲一个非语义div，您可以使用conflicting absolute positions 拉伸到#container 的全高。常规的人造列将被定位以覆盖固定宽度的列，并且非常宽将为流体列提供背景，直到绝对定位的div，包含重复背景的另一端，开始了。结构只是

#container
|-- #bghack
|-- #main-content
|-- #sidebar

#bghack 在其兄弟姐妹之后。