Question

<div id="content">
  <div id="leftColumn">
    left column stuff
  </div>
  <div id="rightColumn">
    right column sidebar stuff
  </div>
</div>

当左列长于右侧时，右列的背景图像会被切断。如何使两列的高度相同？（我尝试将背景图像应用于内容div并修复了问题，但有些页面不使用侧边栏，所以我正在尝试寻找其他解决方案。）

列也不能固定高度。

Answer 1

如果您对IE6和IE7不太在意，最简单的答案是设置

display: table-cell;

在每个列上。只需检查http://ie7nomore.com/css2only/table-layout/这个纯CSS2.1解决方案（这两个列都是满足的，因此您可以轻松地在一个和/或另一列中添加行和文本行）
有些人可能会争辩说不是“使用表格”：CSS属性table的{{1}}值与HTML元素display的呈现方式相同，但它仍然是语义一个table（即无）或其应用的任何元素;）

然后对于IE6和IE7，您可以使用条件注释进行简单的回退（例如将背景应用于其中一个列，如果另一个页面中的另一个更长...没关系并忘记它，它是旧IE和您的文本仍然可读）

Answer 2

如果您希望两列的高度相同，但其内容的长度不同，则需要设置div的高度。你要求它是流动的并且扩展到它们的长度 - 但你希望它们是相同的，这是不可能的。

kjy112为min-height提供了一个很好的解决方案，但他们说它确实在IE6或7中不起作用是正确的。

您可能想看一下这篇文章： http://css-tricks.com/fluid-width-equal-height-columns/

对于另一种解决方案，您可以尝试使列始终扩展到具有最大高度的列。这里问题很好解释： http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 3

如果您不介意使用jQuery，可以使用专门编写的插件来解决此问题。

http://plugins.jquery.com/project/equal-height-columns

Answer 4

将它们包装在容器div中并将其定义为display:table-row，并将这两个子项定义为display:table-cell;height:100%;。这就是我在这里处理它的方式：heyvian.com/html5-css3如果你在contenteditable方面添加内容，你会看到它是如何工作的。

我怀疑这在ie6或ie7中有效。我没有为那些浏览器测试该页面。

Answer 5

我刚刚看到这个并看到答案中没有绿色标签..也许其中一种方法可以提供帮助 - ＆gt;

http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

（其中一些已经在这里提到了 - 但我仍然觉得这是一个很好的概述，有利有弊和很多评论）

Answer 6

问题很简单：

首先，你必须在两个列中添加一个名为“elements”的类，这样你的html将如下所示：

<div id="content">
  <div id="leftColumn" class="elements">
    left column stuff
  </div>
  <div id="rightColumn" class="elements">
    right column sidebar stuff
  </div>
</div>

在此之后，您所要做的就是比较2个高度，并将最大高度与最小高度进行比较。你这样做：

$(document).ready(function () {
    var highestCol = Math.max($('#leftColumn').height(),$('#rightColumn').height());
    $('.elements').height(highestCol);      
});

它是一个jQuery代码，用于计算2列之间的最大高度，并将它们设置为该高度，从而产生2个具有相同高度的列。（最大的一个）

Answer 7

由于某些页面不使用侧边栏，因此您可以为<body>标记提供ID和ID，并以此方式交换背景。至于适用于所有浏览器的解决方案，你运气不好。我还没找到。

#about-me { background: url(about.png) repeat-y; }
#contact { background: url(contact.png) repeat-y; }

<body id="about-me">

或

<body id="contact">

使两列div等于高度

7 个答案: