Question

我有以下HTML和CSS：

<div class="content">
  <div class="leftbg"></div>
  <div class="innercontent"><p>Some content goes here</p></div>
  <div class="rightbg"></div>
</div>

.content {
   overflow: hidden;
}
.leftbg {
background: url("./leftbg.png") repeat-y scroll top left transparent;
margin-left: 0;
float: left;
width: 10px;
}
.innercontent {
width: 600px;
float: left;
margin-left: 0;
}
.rightbg { /* similar to left bg except for the right side */ }

我遇到的问题是leftbg图像只是重复，直到它达到innercontent div中段落的高度。我正在访问数据库以获取内部内容div的内容，因此内容将具有可变高度。有没有办法使它重复，直到它到达leftbg（和rightbg）div的底部？我的意思是重复它直到它在innercontent div的底部而不将高度设置为静态（例如height：200px;），因为高度将是可变的。

Answer 1

来自粉碎杂志的equal height column layout tutorial可能对你有所帮助。有很多解释所有的原因。

Answer 2

我认为您遇到的问题是leftbg和rightbg没有任何内容。 <div class="content">元素的高度等于它的“最高”孩子的高度（在这种情况下是内部内容）。

也许如果你发布一个你想要的最终结果的模型，我可以帮助你。此外，标记会有所帮助。

如何在动态高度上重复CSS重复？

2 个答案: