固定的全高侧边栏（可变宽度/位置）

Question

Javascript 是实现可变宽度/位置的全高侧边栏的唯一方法吗（主要内容通过调整自己的宽度来响应）？

我一直在努力实现的是让一个固定的、全高的侧边栏从侧面滑入，并通过调整其宽度来让右侧的主要内容做出响应。我希望只使用 css 而没有 js 或百分比宽度来实现这一点。

我知道可以实现可变宽度的固定侧边栏，但是需要js来调整主内容区域的margin属性。理想情况下，我可以使用侧边栏的 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;
}

Answer 1

如果您想要一个 2 列布局，它们都扩展以匹配侧边栏或主要内容的高度，您应该使用 Maxdesign layouts 并修改它们。