我有一个棘手的设计付诸实践。将有两个CSS列，其左侧是左侧菜单（~300px），在不使用时折叠为85px。右栏应该展开以填充菜单折叠时可用的任何空间。
这本身并不太棘手，我使用溢出：隐藏技巧（基本上与CSS layout with 2 columns, taking up all width of browser, where left column can collapse上接受的答案相同）
但是我现在正在研究如何让两个列垂直扩展以填充可用的屏幕空间。
可变宽度左侧列似乎阻止我使用Faux Columns技术。我不确定除此之外。
我也有宽度上的CSS过渡，这样崩溃/扩展运动更加流畅，我想维持。
非常感谢任何建议。
编辑：我尽可能接近：http://jsfiddle.net/tsr5a/：
html, body { height:100%;}
#menu { width: 100%; height: 50px; }
#container { overflow: hidden; height:100%; }
#left-column { background:yellow; float:left; height:100%; width:300px; }
#right-column { background:red; height:100%;}
#container .shrink { width:85px; }
我不确定为什么右侧列垂直偏移1行。另请注意，虽然我可以在列上设置100％的高度，但这不会考虑页面顶部的固定高度工具栏。