列页面，如何使用CSS或Javascript将左侧div增长到正确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>

替代文字http://involution.com/images/divlayout.png

---

使用jQuery解决这个问题; 只需在你准备好的功能中调用这个函数：

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

---

你最简单的答案在于下一个版本的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>

---

它可以在CSS中完成！ 别让别人告诉你。

最简单，最无痛苦的方法是使用Faux Columns方法。

但是，如果该解决方案对您无效，您需要阅读此技术。 但是要注意，这是一种CSS骇客，它会让你半夜在冷汗中醒来。

其要点在于，您为列的底部分配大量填充，并且大小相同的负边距。 然后，将您的列放入overflow: hidden的容器中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;
}

请务必阅读我链接到的整篇文章，还有一些注意事项和其他实施问题。 这不是一个漂亮的技术，但它工作得很好。

链接地址: http://www.djcxy.com/p/88097.html

上一篇: column page, how can I grow the left div to the same height of the right div using CSS or Javascript?

下一篇: set default selected