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

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

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

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

想法？提前谢谢

编辑

当前仅css实现不支持全高

侧边栏，用负边距隐藏
主要内容
#容器{
位置：相对位置；
}
#边栏{
浮动：左；
宽度：300px；
}
#内容{}

需要javascript的实现

侧边栏，用宽度或位置隐藏
主要内容，使用js左调整边距
#容器{
位置：相对位置；
}
#边栏{
宽度：300px；
}
#内容{
左边距：300px；
}

如果您希望两列布局都能扩展以匹配侧边栏或主要内容的高度，则应使用并修改它们。

请发布一些相关代码。

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

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