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

Question

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

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

<div style="float:left; width: 150px; border: 1px solid;">
  <ul>
    <li>nav1</li>
    <li>nav2</li>
    <li>nav3</li>
    <li>nav4</li>
  </ul>
</div>
<div style="float:left; width: 250px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....
</div>

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

Answer 1

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

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

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

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

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

<div style="border-left:solid 1px black;border-bottom:solid 1px black;">
  <div style="float:left; width: 150px; border-top: 1px solid;">
    <ul>
     <li>nav1</li>
     <li>nav2</li>
     <li>nav3</li>
     <li>nav4</li>
    </ul>
 </div>
 <div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;">
  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,
  ...
 </div>
 <div style="clear:both;" ></div>
</div>

Answer 2

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

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

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

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

<div id="wrapper">
  <div id="col1">Content</div>
  <div id="col2">Longer Content</div>
</div>

#wrapper {
  overflow: hidden;
}

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

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

Answer 3

使用 jQuery 来解决这个问题；只需在您的就绪函数中调用此函数即可：

function setHeight(){
  var height = $(document).height(); //optionally, subtract some from the height
  $("#leftDiv").css("height", height + "px");
}