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％。 / p>

实际上，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-*值创建此类布局。 Rachel Andrew在本文（以及同名书）中提供了有关CSS表的更多信息：Everything You Know About CSS is Wrong

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

让“table row”元素清除其内部浮动元素。

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

还有许多其他清除浮动的方法，如果这种方法导致不良副作用，您应该检查问题which method of 'clearfix' is best和文章on having layout以了解其他方法。
平衡两个“表格单元格”元素的高度。

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

虚拟柱是一种更简单的方法，当一列或两列的宽度固定时，它可以很好地工作。另一种技术可以更好地处理可变宽度列（基于百分比或em单位），但如果直接链接到列中的内容，则可能会导致某些浏览器出现问题（例如，如果列包含<div id="foo"></div>并且您链接到{{ 1}}）

这是一个使用填充/边距技术来平衡列高度的示例。

#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;
}

Natalie Downe的这个Barcamp演示在确定如何添加额外的列和漂亮的间距和填充时也很有用：Equal Height Columns and other tricks（这也是我第一次了解边距/填充技巧以平衡列高度的地方）

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

以下是等高列的示例 - Equal Height Columns - revisited

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

不要走桌子路线。如果它不是表格数据，请不要将其视为表格数据。它对可访问性和灵活性都不利。

Answer 6

我在我的网站上遇到了同样的问题（shameless plug）。

我有导航部分“float：right”，页面的主体有一个背景图像，大约250px横跨右边和“repeat-y”。然后我添加了一些“清楚：两者”的东西。这是W3Schools和CSS clear property。

我将清除放在“页面”分类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 7

无需编写自己的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 8

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

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

Answer 10

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

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

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

Answer 11

我可以想到2个选项

使用javascript在页面加载时调整较小的列。
通过为background-color

<div/>

<div class="separator"/>

repeat-y

Answer 12

只需使用css属性width就可以了。

以下是一个例子：

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

Answer 13

这应该对您有用：在您的css中为html和body元素设置高度为100％。然后，您可以在div。

中根据需要调整高度

html {
    height: 100%;
}

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

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>

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

14 个答案: