DIV-相同高度jquery或css

我有以下javascript代码：

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

这是可行的，但非常有限。如果我的#sidemenu正在扩展（例如因为sub-menu），它在div中会变得更大

我怎么能在“侧菜单”或“主要内容”变得更大（身高增加）时这样做，它们彼此跟随

如果这可以用CSS来完成，我也愿意这样做

问候。

忘记javascript

将

#侧菜单

放入

#主内容

，给它一个固定的宽度并向左浮动。然后将

#maincontent

（但不是

#侧栏

）中的所有内容包装到名为

#wrapper

（假设）的div中。给

#包装

一个宽度，该宽度等于

#main content

的宽度减去

#侧菜单

的宽度，并将其向左浮动。为了在关闭

#main content

之前采取有效措施，请放置

现在

#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解决方案可能会更好。我不认为你可以将事件附加到DOM元素来侦听属性中的变量更改，你必须自己编写类似的内容。那么有人有.CSS解决方案吗？更新发布了css/html解决方案。：）在这个例子中，使用html/css比使用复杂的javascript要好得多。所以我应该给出一个固定的with和float left#侧菜单，或#主要内容？我会发布一个示例，给我5分钟。我已经发布了一个示例。：）在我的示例中#maincontent将是#sidemenu和#wrapper中较高者的高度。抱歉，但当我尝试此代码时，#wrapper的内容将放在侧菜单下方，而不是右侧。div必须相邻对齐，才能使其有意义。另外，我使用的是网格系统。我不知道为什么会发生这种情况，可能是包装，但不应该这样。

#maincontent {
  width: 960px;
}

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

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