javascript - 固定的全高侧边栏(宽度/位置可变)

Question

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

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

我知道可以实现可变宽度的固定侧边栏，但是需要js来调整主要内容区域的margin属性。理想情况下，我可以使用边栏的 x 位置来显示/隐藏主要内容，在它旁边会自动调整。

想法？提前致谢。

编辑

Current css-only implementation does not support full height

<!--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 {}

Implementation requiring 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并修改它们。