使得两栏div的高度相等 [英] Making two column divs equal height

问题描述

<div id="content">
  <div id="leftColumn">
    left column stuff
  </div>
  <div id="rightColumn">
    right column sidebar stuff
  </div>
</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).

列也不能固定的高度。

推荐答案

如果你不在乎IE6和IE7这么多，最简单的答案是制定

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

显示：表细胞;

在每个列。
只是检查 http://ie7nomore.com/css2only/table-layout/ 这个纯CSS2.1解决方案（包括列CONTENTEDITABLE，所以你可以很容易地在一个和/或其他列添加行和几行文字）结果
而且没有它不是使用表一些人可能认为：CSS属性的表值显示渲染以同样的方式作为一个HTML元素表但它仍然是语义一个 DIV （即无）或任何元素它的应用;）

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 ;)

那么对于IE6和IE7，您可以使用条件的意见一个简单的回退（如应用背景柱之一，如果对方是在一些网页更长......没关系，忘掉它，它的老IE和文本仍然是可读的）

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)

这篇关于使得两栏div的高度相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！