CSS替代此CSS-jQuery代码？

Question

我有两个并排的颜色不同的列.背景也有独特的颜色.右列包含将扩展到未知高度的文本.另一栏几乎没有.

<div id="container">
    <div id="leftColumn">
        <p>Only one small paragraph here</p>
    </div>

    <div id="rightColumn">
        <p>Many large paragraphs inside here.</p>
    </div>
</div>

我希望左列是与右列完全相同的高度.

这是CSS ......

#leftColumn {
    display:inline-block;
    width: 200px;
}
#rightColumn {
    display:inline-block;
    width: 600px;
    vertical-align: top;
}

因此,当页面加载时,我使用jQuery根据右列的高度设置左列的高度.

$(document).ready(function() {
    $('#leftColumn').css('height', $('#rightColumn').innerHeight());
});

有没有办法只用CSS做到这一点？

Answer 1

除了使用 Javascript 之外，还有其他一些方法可以实现这种布局。

方法包括：

• 在元素上使用 display:table
• 假列（父元素上的背景图像）
• 为每个背景添加多个 div 容器
• 使用表格（由于显而易见的原因不太受欢迎）

所有这些都有不同的优点和缺点，并且每一种都给网站的开发带来了各自的麻烦。我投票支持使用人造列，因为它使 html 保持最简单并且与所有浏览器兼容。

补充阅读：

• http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
• http://www.alistapart.com/articles/fauxcolumns/
• http://www.code-sucks.com/css%20layouts/faux-css-layouts/
• http://www.addedbytes.com/articles/faux-columns-for-liquid-layouts/