DIV - 同じ高さのjQueryやCSS

Question

私はこのJavaScriptコードを持っている：

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

これは動作しますが、それは非常に限られています。 #sidemenuが展開されている場合（サブメニューのために例）、div内で大きくなります。

#sidemenuまたは#maincontentが大きいほど（高さが増えた）、それらがお互いに続いている場合はどうすればいいですか。

これをCSSで行うことができれば、私はこれも開いています。

よろしくお願いいたします。

Answer 1

忘れてしまったjavascript。

#sidemenuを#maincontentに入力し、固定幅を与えて左に浮かします。その後、#wrapperという区切りに#maincontent（ただし、#sidebarは含まれていません）のすべてをラップします（言います）。 #wrapperには、#maincontentの幅から#sidemenuの幅を差し引いた幅に等しい幅を与え、それも左に浮かせます。閉鎖直前のよい測定のために</div>の#maincontentを入れて<br style="clear: both" />を入れてください。

今#maincontent（それがする必要がある場合）sidemenuに合わせて拡大しますが、#maincontentのコンテンツも独自のラッパーdivの中にそのように、その短すぎる場合#sidemenuの下に折り返されません。

これが役に立った。ここ

更新

は一例です：

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