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

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

Answer 1

如果您希望2列布局同时展开以匹配侧边栏或主要内容的高度，则应使用Maxdesign layouts并修改它们。