在双列页面上,如何使用CSS或Javascript将左div增加到右div的相同高度？

我正在尝试使用基于div的布局创建一个双列页面(请不要使用表格!).问题是,我不能使左边的div与右边的高度相匹配.我的右边div通常有很多内容.

这是我模板的配对示例,用于说明问题.

  

    
nav1
    
nav2
    
nav3
    
nav4
  


Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....

alt text http://involution.com/images/divlayout.png

您最简单的答案在于css(3)的下一个版本,目前没有浏览器支持.

现在你被降级为计算javascript中的高度并将其设置在左侧.

如果导航对于以这种方式定位非常重要,请沿顶部运行.

你也可以通过将边框移动到容器和更大的内部来做一个视觉技巧,并使它看起来是相同的大小.

这使它看起来一样,但事实并非如此.

  

    

     
nav1
     
nav2
     
nav3
     
nav4
    
 
 

  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  ...
 
 

它可以在CSS中完成!不要让别人告诉你.

最简单,最无痛苦的方法是使用Faux Columns方法.

但是,如果该解决方案不适合您,您将需要阅读此技术.但要注意,这是一种CSS hackery,会让你在半夜冷汗醒来.

它的要点是你在列的底部分配了大量的填充,并且相同大小的负边距.然后将列放在已overflow: hidden设置的容器中.或多或少的填充/边距值允许框保持扩展,直到它到达包装器的末尾(由具有最多内容的列确定),并且由填充产生的任何额外空间被切断为溢出.它没有多大意义,我知道......

  
Content
  
Longer Content


#wrapper {
  overflow: hidden;
}

#col1, #col2 {
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

请务必阅读我链接的整篇文章,有一些警告和其他实施问题.这不是一个漂亮的技术,但它运作得相当好.