html - 如何将一个背景图像用于具有两个 div 的主 div，一个在左侧，一个在右侧

Question

我想制作一个 HTML、CSS 页面，其布局如下：
<div id="content">
<div id="left">
.....
</div>
<div id="right">
.. ...
</div>
</div>
内容 div 有一个背景图像，应该在 y 方向重复。此外，左右 div 应该并排在同一个背景图像上。我能够做到这一点，但通过保持内容的高度固定但我不想使内容的高度固定。请帮助我的人。提前致谢 ：）

Answer 1

没有看到你的代码......我的猜测是你浮动左右 DIV......但你没有浮动内容 DIV......

您的 CSS 应该与此类似以使其正常工作：

#content {
    float:left;
    background-image:url('whatever.png');
    background-repeat:repeat-y;
}

#left {
    float:left;
}

#right {
    float:left;
}

Answer 2

我能够完成它，但通过保持内容的高度固定但我不想使内容的高度固定。

如果您能够在 Y 方向上重复背景图像，那么#contentdiv 的高度无关紧要，因为您的背景只会填充剩余空间 - 对吗？

如果您的内容 div 没有扩展到子 div 的高度，那么显然#content必须超出页面的正常流程，在这种情况下，您应该float这样做，而不是为容器 div 设置高度。

Answer 3

很难理解您要做什么，但我认为您想要做的是添加overflow: auto到您的内容 div 中，使其与左右 div 的高度相同：

#content {
  overflow: auto;
  background: [bg code]
}
#left, #right {
  float: left;
}