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

我试图布置一个有两列的表格的页面。我想要最右边的列停靠在页面的右侧，并且此列应该有不同的背景颜色。右侧的内容几乎总是小于左侧的内容。我希望右边的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，代码在预览视图中正确显示，但当我实际上发布的消息，格式化被删除。编辑我的帖子在Firefox 2似乎已经工作，FWIW。

另一个编辑：是的，我不接受GateKiller的答案。它确实工作在我的简单页面上，但不是在我的实际较重的页面。我会调查一些已经指向我的链接。

解决方法

…

The short answer to your question is that you must set the height of 100% to the body and html tag,then set the height to 100% on each div element you want to make 100% the height of the page.

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

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

解决方法

猜你在找的CSS相关文章