使用 CSS 在 HTML 中设置 div 的高度
https://stackoverflow.com/questions/4973
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我正在尝试布局一个包含两列的类似表格的页面。我希望最右边的列停靠在页面的右侧，并且该列应该具有明显的背景颜色。右侧的内容几乎总是比左侧的内容小。我希望右侧的 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% 的高度在大多数设计情况下都行不通——这可能很短，但这不是一个好的答案。谷歌“任何列最长”布局。最好的方法是将左列和右列放在包装器中 div, ，浮动左列和右列，然后浮动包装纸 - 这使其拉伸到内部容器的高度 - 然后在外部包装纸上设置背景图像。但请注意浮动元素上的任何水平边距，以防出现 IE“双边距浮动错误”。
其他提示
尝试一下：
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>某些浏览器支持 CSS 表格，因此您可以使用各种 CSS 创建这种布局 display: table-* 价值观。Rachel Andrew 撰写的这篇文章（以及同名书籍）提供了有关 CSS 表的更多信息： 你所知道的关于 CSS 的一切都是错误的
如果您需要在不支持 CSS 表的旧版浏览器中保持一致的布局，您需要做两件事：
使您的“表格行”元素清除其内部浮动元素。
最简单的方法是设置
overflow: hidden它可以处理大多数浏览器，并且zoom: 1来触发hasLayout旧版本 IE 中的属性。还有许多其他方法可以清除浮动，如果这种方法会导致不良副作用，您应该检查问题 “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 演示在了解如何添加额外的列以及良好的间距和填充时也可能很有用： 等高列和其他技巧 （这也是我第一次了解平衡列高度的边距/填充技巧的地方）
我放弃了严格的 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);
我在我的网站上遇到了同样的问题（无耻插头).
我有导航部分“浮动：right”，页面主体有一个大约 250px 的背景图像，向右对齐并“repeat-y”。然后我添加了一些“清楚：两者”。这是 W3Schools 和 CSS 清除属性.
我将透明放置在“页面”类 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)
我希望这有帮助:)
不需要自己写css，有一个名为“Bootstrap css”的库，通过在HTML head部分调用它，我们可以实现很多样式，下面是一个例子：如果您想提供连续两列，您可以简单地执行以下操作：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-md-6">Content</div>
<div class="col-md-6">Content</div>
</div>这里 md 代表中型设备，对于较小的设备可以使用 col-sm-6，对于超小型设备可以使用 col-xs-6
对您问题的简短回答是，您必须将 body 和 html 标记的高度设置为 100%，然后将每个要使页面高度为 100% 的 div 元素的高度设置为 100%。
在 CSS 中使用 2 列布局有点困难（至少在 CSS3 实用之前是这样。）
左右浮动可以达到一定程度，但它不允许您扩展背景。为了使背景保持稳定，您必须实施一种称为“假列”的技术，这基本上意味着您的列本身不会有背景图像。您的 2 列将包含在父标签内。该父标签具有一个背景图像，其中包含您想要的 2 列颜色。将此背景设置为您需要的大小（如果它是纯色，则仅将其设置为 1 像素高）并使其重复。AListApart 有一个很好的演练，介绍了让它工作所需的内容。
我能想到两个选择
- 使用 javascript 在页面加载时调整较小列的大小。
- 通过设置来伪造相等的高度
background-color对于容器上的列<div/>反而 （<div class="separator"/>） 和repeat-y
只是想在这里提供帮助，使代码更具可读性。
请记住，您可以通过单击顶部的“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>
这应该适合你：在 css 中将高度设置为 100% html 和 body 元素。然后您可以根据需要调整高度 div.
html {
height: 100%;
}
body {
height: 100%;
}
div {
height: 100%; /* Set Div Height */
}
只需使用 css 属性就足够了 width 这样做。
这是一个例子：
<style type="text/css">;
td {
width:25%;
height:100%;
float:left;
}
</style>
.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>