使用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中创建/编辑帖子时，代码可以在预览视图中正确显示，但是当我实际发布消息时，格式会被删除。 FWIW在Firefox 2中编辑我的帖子似乎有效。
另一个编辑：是的，我不接受GateKiller的回答。在我的简单页面上，它确实确实可以很好地工作，但在我实际的较重页面上却不能。我将研究大家都指向我的一些链接。
解决方案
回答
我的网站上遇到了同样的问题(无耻的插件)。
我的导航栏为" float：right"，页面主体的背景图片大约为250px，与右边对齐，" repeat-y"。然后，我在其中添加了"清晰：两者都"的内容。这是W3Schools和CSS clear属性。
我在"页面"分类div的底部放置了透明标签。我的页面来源看起来像这样。
body
-> header (big blue banner)
-> headerNav (green bar at the top)
-> breadcrumbs (invisible at the moment)
-> page
-> navigation (floats to the right)
-> content (main content)
-> clear (the quote at the bottom)
-> footerNav (the green bar at the bottom)
-> clear (empty but still does something)
-> footer (blue thing at the bottom)
希望对我们有所帮助：)
回答
只是在这里尝试提供帮助，使代码更易读。
请记住，我们可以通过单击顶部带有" 101010"的按钮来插入代码段。只需输入代码，然后突出显示它，然后单击按钮即可。
这是一个例子：
<html>
<body>
<style type="text/css">
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
</style>
回答
试试看：
html, body,
#left, #right {
height: 100%
}
#left {
float: left;
width: 25%;
}
#right {
width: 75%;
}
<html>
<body>
<div id="left">
Content
</div>
<div id="right">
Content
</div>
</body>
</html>
回答
这是等高列的示例重新访问等高列
我们也可以查看"人造柱"的概念以及人造柱
不要走桌子路线。如果不是表格数据，请不要这样对待。这对可访问性和灵活性不利。
回答
这个问题的简短答案是，我们必须将body和html标记的高度设置为100％，然后在要使页面高度为100％的每个div元素上将高度设置为100％。
回答
2列布局很难在CSS中工作(至少在CSS3实用之前)。
向左和向右浮动可以工作到一定程度，但不允许我们扩展背景。为了使背景保持坚实，我们必须实施一种称为"仿列"的技术，这基本上意味着列本身将没有背景图像。2列将包含在父标记内。此父标签将获得包含所需2种列颜色的背景图像。仅根据需要设置此背景的大小(如果它是纯色，则仅将其设置为1像素高)，并使其重复-y。 AListApart很好地介绍了使其工作所需的内容。
http://www.alistapart.com/articles/fauxcolumns/
回答
啊...
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"任何列最长"的布局。最好的方法是将左右cols放在包装器div中，使左右cols浮动，然后使包装器浮动，这使其伸展到内部容器的高度，然后在外部包装器上设置背景图像。但是要注意浮动元素上的任何水平边距，以防出现IE"双边距浮动bug"。
回答
我可以想到2个选择
- 使用javascript来调整页面加载时较小列的大小。
- 通过使用
repeat-y代替容器<div />上的列的background-color(<div class =" separator" />)来伪造相等的高度。
回答
我放弃了严格的CSS并使用了一些jquery：
var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();
if (leftcol_height > rightcol_height)
rightcol.height(leftcol_height);
else
leftcol.height(rightcol_height);
回答
一些浏览器支持CSS表，因此我们可以使用各种CSSdisplay：table- *值来创建这种布局。雷切尔·安德鲁(Rachel Andrew)撰写的这篇文章(以及同名书籍)中提供了有关CSS表的更多信息：关于CSS的所有知识都是错误的
如果我们需要在不支持CSS表的旧版浏览器中保持一致的布局，则需要做两件事：
- 使"表行"元素清除其内部浮动元素。最简单的方法是设置" overflow：hidden"(可处理大多数浏览器)，并设置" zoom：1"来触发旧版IE中的" hasLayout"属性。还有许多其他清除浮点的方法，如果这种方法引起不良的副作用，则应检查" clearfix"哪种方法最好，以及有关为其他方法进行布局的文章。
- 平衡两个"表格单元"元素的高度。有两种方法可以解决此问题。我们可以通过在"表格行"元素上设置背景图像(仿列技术)来创建高度相等的外观，也可以通过为每个列提供较大的填充和同样大的负边距来使列的高度匹配。人造色谱柱是一种较简单的方法，当一根或者两根色谱柱的宽度固定时，效果很好。另一种技术可以更好地处理可变宽度的列(基于百分比或者em单位)，但是如果我们直接链接到列中的内容(例如，如果某列包含
<div id =" foo"> </ div>，并且我们已链接到＃foo)
这是一个使用填充/边距技术来平衡列高的示例。
html, body {
height: 100%;
}
.row {
zoom: 1; /* Clear internal floats in IE */
overflow: hidden; /* Clear internal floats */
}
.right-column,
.left-column {
padding-bottom: 1000em; /* Balance the heights of the columns */
margin-bottom: -1000em; /* */
}
.right-column {
width: 20%;
float: right;
}
.left-column {
width: 79%;
float: left;
}
<div class="row"> <div class="right-column">Right column content</div> <div class="left-column">Left column content</div> </div> <div class="row"> <div class="right-column">Right column content</div> <div class="left-column">Left column content</div> </div>
Natalie Downe的这个Barcamp演示在弄清楚如何添加额外的列以及良好的间距和填充时也可能会有用：等高列和其他技巧(这也是我第一次学习了用于平衡列高度的margin / padding技巧)
