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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试将表格列分为两列。我希望最右边的列停靠在页面的右边，并且此列应具有不同的背景色。右侧的内容几乎总是小于左侧的内容。我希望右侧的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的回答。在我的简单页面上，它确实确实可以很好地工作，但在我实际的较重页面上却不能。我将研究大家都指出的一些链接。

回答：

啊…

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

实际上，在大多数设计情况下100％的高度将不起作用-

这可能很短，但这不是一个好答案。Google“任何列最长”的布局。最好的方法是将左右cols放入包装器中div，使左右cols浮动，然后使包装器浮动-

这使它伸展到内部容器的高度-然后在外部包装器上设置背景图像。但是请注意浮动元素上的任何水平边距，以防出现IE“双边距浮动bug”。

以上是 使用CSS在HTML中设置div的高度 的全部内容， 来源链接： utcz.com/qa/433660.html

回到顶部