CSS替代这个CSS jQuery代码？

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

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

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

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

---

有没有一种只使用CSS的方法可以做到这一点？

使用

我不确定是否有一种纯CSS的方法可以做到这一点（可能在CSS3中）。但是你应该阅读这篇文章，看看它是否适合你

如果不是，你可以考虑这个技巧（这需要很多愚蠢的标记）。

---

除了使用Javascript，还有其他几种方法可以实现此布局

方法包括：

• 在元素上使用display:table
• 人造列（父元素上的背景图像）
• 为每个背景添加多个div容器
• 使用表格（由于明显的原因不太流行）

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

附加阅读：

---

除非他显示的是表格数据，否则这是个坏主意（tm）@Bryan Ross-在空中做循环，用一个简单的现有工具实现某些东西，在编程中通常是个坏主意。此外，div的语义甚至不如表。是的，使用

table

+可以轻松完成，并通过合理的CSS增强，以达到预期的效果。尽管使用表很容易，但我认为我不会走这条路。我刚刚读过的内容是——表格是用来存储数据的。浏览器将表标记解释为专门为数据设计的东西。如果将表用于数据以外的其他内容，您要么a）束缚了浏览器开发人员的手脚，要么b）由于浏览器开发人员决定在将来以不同方式呈现表，因此您的网站有被破坏的风险。再加上对W3C的漠视导致了类似IE的结果。真正的解决方案应该是对CSS的更新，而不是像宽度一样处理高度。高度属性的扩展名或其他值。在那之前我们将就一下。还有@Itay Moav，div的语义到底有多少？他想将页面“划分”为两列。第二个链接为+1。。它没有太多愚蠢的标记。。每列有一个额外的包装div。当其他工具更好地解决问题时，CSS可能不是唯一的工具。HTML表格不是邪恶的；虽然在CSS支持之前，表可能已经被过度使用了，但表仍然有自己的位置。当你说的是同等高度时，表格会自动具有这种高度，并且仍然可以通过CSS进行控制，这是一个混合解决方案，使用了两个世界中最好的。否则，如果为了它而使用一个工具来排除其他工具，它可能会很快变得复杂。然后，作者再次提出了一个仅使用CSS的解决方案，因此，可能试图强制执行我们的理想，排除直接回答问题，这是与流程背道而驰的。使用display:table on a div有什么缺点？@Jitendra-IE 6/7不支持display:table.谢谢你提供了这么好的选项列表。我得考虑什么对我的设计最好。选项三看起来可能很有效。人造列看起来也不错，但我不确定是否要处理IE和其他浏览器之间的框模型差异。

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