html - 使用 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 中创建/编辑我的帖子时，代码会在预览视图中正确显示，但是当我实际发布消息时，格式会被删除。FWIW，在 Firefox 2 中编辑我的帖子似乎奏效了。

另一个编辑：是的，我不接受 GateKiller 的回答。它确实在我的简单页面上工作得很好，但在我实际较重的页面上却不行。我会调查一些你们都指向我的链接。

score 22 · Accepted Answer

咳咳……

对您的问题的简短回答是，您必须将 100% 的高度设置为 body 和 html 标记，然后在要使页面高度为 100% 的每个 div 元素上将高度设置为 100%。

实际上，在大多数设计情况下，100% 的高度是行不通的——这可能很短，但这不是一个好的答案。谷歌“任何一列最长”的布局。最好的方法是将左右列放在包装器div中，浮动左右列然后浮动包装器 - 这使其拉伸到内部容器的高度 - 然后在外包装上设置背景图像。但请注意浮动元素上的任何水平边距，以防出现 IE“双边距浮动错误”。

score 9 · Accepted Answer

试试这个：

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>

score 7 · Accepted Answer

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

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

让您的“表格行”元素清除其内部浮动元素。

执行此操作的最简单方法是设置overflow: hidden哪个会照顾大多数浏览器，并在旧版本的 IE 中zoom: 1触发该属性。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 演示在弄清楚如何添加额外的列以及良好的间距和填充时也可能很有用：等高列和其他技巧（这也是我第一次了解平衡列高度的边距/填充技巧的地方）

score 5 · Accepted Answer

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

score 3 · Accepted Answer

这是等高列的示例 -等高列 - 重新访问

您还可以查看“Faux Columns”的想法 - Faux Columns

不要走餐桌路线。如果它不是表格数据，请不要这样对待它。这对可访问性和灵活性不利。

score 2 · Accepted Answer

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

我有导航部分“浮动：右”，页面的主体有一个大约 250 像素的背景图像，向右对齐和“重复-y”。然后我添加了一些带有“clear：both”的东西。这是 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)

我希望这会有所帮助:)

score 1 · Accepted Answer

不用自己写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 用于超小型设备

score 0 · Accepted Answer

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

score 0 · Accepted Answer

对您的问题的简短回答是，您必须将 100% 的高度设置为 body 和 html 标记，然后在要使页面高度为 100% 的每个 div 元素上将高度设置为 100%。

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

我能想到2个选项

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

score 0 · Accepted Answer

只需使用 css 属性width就足够了。

这是一个例子：

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

score 0 · Accepted Answer

html这应该对你有用：在你的 CSS 中为andbody元素设置高度为 100% 。然后，您可以在div.

html {
    height: 100%;
}

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

score 0 · Accepted Answer

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

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

14 回答 14

Related

Reference