使两列div等于高度

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

When the left column is longer than the right, the right column's background image gets cut off. How do I make both columns the same height? (I tried applying a background image to the content div and it fixed the problem, but some pages don't use the sidebar so I'm trying to look for another solution).

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

the columns also can't be fixed height.

列也不能固定高度。

7 个解决方案

#1

If you don't care so much about IE6 and IE7, the simplest answer is setting

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

display: table-cell;

显示：table-cell;

on each of your columns. Just check http://ie7nomore.com/css2only/table-layout/ for this pure CSS2.1 solution (both columns are contenteditable so you can easily add lines and lines of text in one and/or another column)
And no it isn't "using tables" as some may argue : the table value of the CSS property display renders the same way as a the HTML element table but it's still the semantic of a div (i.e. none) or whatever element it's applied to ;)

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

Then for IE6 and IE7, you can use conditional comments for a simple fallback (like applying background to one of the column and if the other is longer in some pages ... nevermind and forget it, it's old IE and your text is still readable)

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

#2

If you want both columns to be the same height, yet their contents are different lengths, you need to set the height of the divs. You are asking for it to be fluid and expand to their length -- yet you want them to be the same which is just not possible.

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

kjy112 offered a good solution with min-height, but they are correct in saying that it indeed does not work in IE6 or 7.

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

You may want to take a look at this article: http://css-tricks.com/fluid-width-equal-height-columns/

您可能需要查看这篇文章：http：//css-tricks.com/fluid-width-equal-height-columns/

For another solution, you could try making the columns always expand to the column with the greatest height. Very good explanation of the problem here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

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

#3

If you don't mind using jQuery, there is a plugin written specifically to address this issue.

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

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

#4

Wrap them in a container div and define it as display:table-row, and the two children, define as display:table-cell;height:100%;. That's how I handled it here: heyvian.com/html5-css3 and if you add content in the contenteditable side you'll see how it works.

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

I doubt this works in ie6 or ie7 though. I haven't tested that page for those browsers.

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

#5

i just came across this and saw there's no green tag on either answer yet.. Maybe one of these methods could help ->

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

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

(some of it is already mentioned here - but i still find it a nice overview with pros and cons and lots of comments)

（其中一些已在此处提及 - 但我仍然发现它有一个很好的概述，有利有弊和很多评论）

#6

The problem is very simple:

问题很简单：

First you have to add a class named "elements" to both columns so your html will look like this:

首先，您必须在两个列中添加一个名为“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>

After this, all you have to do is to compare the 2 heights, and aplay the maximum height to the smallest one. You do this like this:

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

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

Its a jQuery code witch calculate the maximum height between the 2 columns, and set them both with that height, resulting 2 columns with the same height. (the biggest one)

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

#7

Since some pages don't use a sidebar you can give and ID to your <body> tag and swap backgrounds that way. As far as a solution that works in all browsers, you're out of luck. I haven't found any.

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

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

<body id="about-me">

要么

<body id="contact">

#1