使用CSS在HTML中设置div的高度

Question

我正在尝试将表格列分为两列。我希望最右边的列停靠在页面的右边，并且此列应具有不同的背景色。右侧的内容几乎总是小于左侧的内容。我希望右侧的div始终足够高，以到达其下一行的分隔符。如何使背景色填充该空间？

.rightfloat {

  color: red;

  background-color: #BBBBBB;

  float: right;

  width: 200px;

}



.left {

  font-size: 20pt;

}



.separator {

  clear: both;

  width: 100%;

  border-top: 1px solid black;

}


<div class="separator">

  <div class="rightfloat">

    Some really short content.

  </div>

  <div class="left">

    Some really really really really really really

    really really really really big content

  </div>

</div>

<div class="separator">

  <div class="rightfloat">

    Some more short content.

  </div>

  <div class="left">

    Some really really really really really really

    really really really really big content

  </div>

</div>

编辑：我同意这个示例非常类似于表，并且实际表将是一个不错的选择。但是我的“真实”页面最终将变得不像表格一样，我只想首先掌握此任务！

另外，由于某种原因，当我在IE7中创建/编辑帖子时，代码可以正确显示在预览视图中，但是当我实际发布消息时，格式会被删除。FWIW在Firefox
2中编辑我的帖子似乎有效。

另一个编辑：是的，我不接受GateKiller的回答。在我的简单页面上，它确实确实可以很好地工作，但在我实际的较重页面上却不能。我将研究大家都指出的一些链接。

Answer 1

啊…

这个问题的简短答案是，您必须将body和html标记的高度设置为100％，然后在要使页面高度为100％的每个div元素上将高度设置为100％。

实际上，在大多数设计情况下100％的高度将不起作用-
这可能很短，但这不是一个好答案。Google“任何列最长”的布局。最好的方法是将左右cols放入包装器中div，使左右cols浮动，然后使包装器浮动-
这使它伸展到内部容器的高度-然后在外部包装器上设置背景图像。但是请注意浮动元素上的任何水平边距，以防出现IE“双边距浮动bug”。