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

Question

我试图布置一个有两列的表格式页面。 我希望最右边的列停靠在页面右侧，此列应具有不同的背景颜色。 右侧的内容几乎总是小于左侧的内容。 我希望右侧的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的回答。 它确实在我的简单页面上很好地工作，但不是在我实际较重的页面中。 我将调查你们所指出的一些链接。

Answer 1

咳咳...

对你的问题的简短回答是你必须将100％的高度设置为body和html标签，然后将每个div元素的高度设置为100％，使其成为页面高度的100％。

实际上，100％的高度在大多数设计情况下都不起作用 - 这可能很短但不是一个好的答案。 谷歌“任何列最长”的布局。 最好的方法是将左右cols放在包装器div ，浮动左右cols然后浮动包装器 - 这使它伸展到内部容器的高度 - 然后在外包装器上设置背景图像。 但是如果你得到IE“双边缘浮动bug”，请注意浮动元素的任何水平边距。

Answer 2

尝试一下：

 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> 

Answer 3

有些浏览器支持CSS表，因此您可以使用各种CSS display: table-* values创建这种布局。 Rachel Andrew提供了有关CSS表格的更多信息（以及同名书籍）： 你所知道的关于CSS的一切都是错误的

如果在不支持CSS表的旧浏览器中需要一致的布局，则需要做两件事：

1. 使“table row”元素清除其内部浮动元素。

   最简单的方法是设置overflow: hidden来处理大多数浏览器， zoom: 1来触发旧版IE中的hasLayout属性。

   还有许多其他清除浮动的方法，如果这种方法导致不良副作用，你应该检查问题'clearfix'哪个方法最好，以及有关其他方法布局的文章。

2. 平衡两个“表格单元格”元素的高度。

   有两种方法可以解决这个问题。 您可以通过在“表格行”元素（ 人造列技术 ）上设置背景图像来创建相等高度的外观，也可以通过为每个列提供大填充和同样大的负边距来使列的高度匹配。

   人造柱是一种更简单的方法，当一列或两列的宽度固定时，它非常有效。 另一种技术可以更好地处理可变宽度列（基于百分比或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演示在确定如何添加额外的列和漂亮的间距和填充时也很有用： 等高度列和其他技巧 （这也是我第一次了解边距/填充技巧以平衡色谱柱高度的地方）

Answer 4

我放弃了严格的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);

Answer 5

这是一个等高柱的例子 - 等高柱 - 重新审视

您还可以查看“Faux Columns”的概念 - Faux Columns

不要走桌子路线。 如果它不是表格数据，请不要将其视为表格数据。 这对可访问性和灵活性来说很糟糕。

Answer 6

不需要编写自己的css，有一个名为“Bootstrap css”的库，通过调用HTML头部分，我们可以实现很多样式，这里有一个例子：如果你想连续提供两列，你可以简单请执行下列操作：

 <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用于额外的小型设备

Answer 7

我在我的网站上遇到了同样的问题（ 无耻的插件 ）。

我有导航部分“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)

我希望有帮助:)

Answer 8

只需使用css属性width即可。

这是一个例子：

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>

Answer 9

这应该对你有用：在你的CSS中为html和body元素设置高度为100％。 然后，您可以在div中根据需要调整高度。

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
} 

Answer 10

只是尝试在这里提供帮助，以便代码更具可读性。
请记住，您可以通过单击“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>

Answer 11

对你的问题的简短回答是你必须将100％的高度设置为body和html标签，然后将每个div元素的高度设置为100％，使其成为页面高度的100％。

Answer 12

2列布局有点难以在CSS中工作（至少在CSS3实用之前。）

左右浮动将工作到一个点，但它不允许您扩展背景。 为了使背景保持稳定，你必须实现一种称为“人造柱”的技术，这基本上意味着你的列本身不会有背景图像。 您的2列将包含在父标记内。 此父标记的背景图像包含您想要的2列颜色。 使这个背景只有你需要它的大（如果它是一个纯色，只有1像素高）并重复y。 AListApart对使其工作所需的内容进行了很好的演练。

http://www.alistapart.com/articles/fauxcolumns/

Answer 13

我可以想到2个选项

1. 使用javascript在页面加载时调整较小的列。
2. 通过使用repeat-y设置容器<div/>上的列的background-color （ <div class="separator"/> ）来伪造相等的高度

Answer 14

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