使用CSS在HTML中设置div的高度 [英] Setting a div's height in HTML with CSS

问题描述

我试图布置一个有两列的表格式页面。我想要最右边的列停靠在页面的右侧，并且此列应该有不同的背景颜色。右侧的内容几乎总是小于左侧的内容。我希望右边的div总是足够高，以到达它下面的行的分隔符。如何使我的背景颜色填充这个空间？

I am trying to lay out a table-like page with two columns. I want the rightmost column to dock to the right of the page, and this column should have a distinct background color. The content in the right side is almost always going to be smaller than that on the left. I would like the div on the right to always be tall enough to reach the separator for the row below it. How can I make my background color fill that space?

.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>

编辑：我同意这个例子非常像表格，一个实际的表是一个很好的选择。但是，我的真正的页面最终会减少表格，我只是想先掌握这个任务！

I agree that this example is very table-like and an actual table would be a fine choice. But my "real" page will eventually be less table-like, and I'd just like to first master this task!

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

Also, for some reason, when I create/edit my posts in IE7, the code shows up correctly in the preview view, but when I actually post the message, the formatting gets removed. Editing my post in Firefox 2 seems to have worked, FWIW.

另一个编辑：是的，我不接受GateKiller的回答。它确实在我的简单页面上工作很好，但不是在我的实际较重的页面。

Another edit: Yeah, I unaccepted GateKiller's answer. It does indeed work nicely on my simple page, but not in my actual heavier page. I'll investigate some of the links y'all have pointed me to.

推荐答案

Ahem ...

你的问题的简短答案是你必须设置100％的高度为body和html标签，然后在每个div上设置高度为100％

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双边浮动错误。

Actually, 100% height will not work in most design situations - this may be short but it is not a good answer. Google "any column longest" layouts. The best way is to put the left and right cols inside a wrapper div, float the left and right cols and then float the wrapper - this makes it stretch to the height of the inner containers - then set background image on the outer wrapper. But watch for any horizontal margins on the floated elements in case you get the IE "double margin float bug".

这篇关于使用CSS在HTML中设置div的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！