javascript - 固定のフルハイト サイドバー (可変幅/位置)

Question

Javascript は、可変幅/位置 (メイン コンテンツが独自の幅を調整することによって応答する) のフルハイト サイドバーを実現する唯一の方法ですか?

私が達成しようとしてきたのは、固定されたフルハイトのサイドバーを横からスライドインさせ、右側のメイン コンテンツを幅を調整することで対応させることです。CSSのみを使用し、jsまたはパーセンテージ幅を使用せずにこれを達成したいと考えています。

可変幅の固定サイドバーを実現できることはわかっていますが、メイン コンテンツ領域のマージン プロパティを調整するには js が必要です。理想的には、サイドバーの x 位置を使用して表示/非表示を切り替えることができ、その横にあるメイン コンテンツが自動的に調整されます。

考え？前もって感謝します。

編集

現在の css のみの実装はフルハイトをサポートしていません

<!--HTML-->
<div id="container">
   <div id="sidebar">sidebar, hidden with negative margin</div><!-- end sidebar -->
   <div id="content">main content</div><!-- end content -->
</div><!-- end container -->


<!--CSS pseudo-code-->
#container {
   position:relative;
}
#sidebar {
   float:left;
   width:300px;
}
#content {}

JavaScriptが必要な実装

<!--HTML-->
<div id="container">
   <div id="sidebar">sidebar, hidden with width or position</div><!-- end sidebar -->
   <div id="content">main content, margin-left adjusted using js</div><!-- end content -->
</div><!-- end container -->


<!--CSS pseudo-code-->
#container {
   position:relative;
}
#sidebar {
   width:300px;
}
#content {
   margin-left: 300px;
}