jquery - DIV-相同高度的jQuery或CSS

我有这个javascript代码：

$(document).ready(function() {
    var leftHeight = $('#maincontent').height();
    $('#sidemenu').css({'height':leftHeight});
});

这有效，但是非常有限。如果我的#sidemenu正在扩展（例如由于子菜单），则它在div内会变大。

每当#sidemenu或#maincontent变大（高度增加），它们彼此跟随时，我该怎么做。

如果可以使用CSS做到这一点，我也很乐意。

问候。

最佳答案

忘记JavaScript。

将#sidemenu放入#maincontent，为其设置固定宽度并向左浮动。然后将#maincontent中的所有内容（而不是#sidebar）包装到一个名为#wrapper的div中（让我们说）。给#wrapper一个宽度，该宽度等于#maincontent的宽度减去#sidemenu的宽度，然后也将其浮动。在</div>的#maincontent结束之前，最好采取措施。

现在，<br style="clear: both" />将进行扩展以适合侧面菜单（如果需要），但是#maincontent中的内容如果太短，也不会包装在#maincontent的下面，因为它在自己的包装div中。

希望这会有所帮助。

更新

这是一个例子：

html

<div id="maincontent">
  <div id="sidemenu">
    <ul>
      <li><a href="#asd">A Link</a></li>
      <li><a href="#asd">A Link</a></li>
      <li><a href="#asd">A Link</a></li>
      <li><a href="#asd">A Link</a></li>
      <li><a href="#asd">A Link</a></li>
    </ul>
  </div>

  <div id="wrapper">
    This is where your text goes in the main content area of the site.
  </div>

  <br style="clear: both" />
</div>

的CSS

#maincontent {
  width: 960px;
}

#sidemenu {
  width: 330px;
  float: left;
}

#wrapper {
  width: 660px;
  float: left;
}

mainContent

jquery - DIV-相同高度的jQuery或CSS