使两列div等于高度

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解决方案(这两个列都是满足的,因此您可以轻松地在一个和/或另一列中添加行和文本行)
并且不是它"有些人可能会争辩说"使用表格:tableCSS属性的值display呈现与HTML元素相同的方式,table但它仍然是div(或者没有)的语义或者它应用的任何元素;)

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