在两列页面上，如何使用CSS或Javascript将左侧div增加到右侧div的相同高度？ [英] On a two-column page, how can I grow the left div to the same height of the right div using CSS or Javascript?

问题描述

我想使用一个基于div的布局（没有表请！）的两列页面。问题是，我不能增长左div来匹配右边的高度。我的右div通常有很多内容。

I'm trying to make a two-column page using a div-based layout (no tables please!). Problem is, I can't grow the left div to match the height of the right one. My right div typically has a lot of content.

下面是我的模板配对示例来说明问题。

Here's a paired down example of my template to illustrate the problem.

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

推荐答案

只需在您的ready函数中调用此函数：

Use jQuery for this problem; just call this function in your ready function:

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

这篇关于在两列页面上，如何使用CSS或Javascript将左侧div增加到右侧div的相同高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！