css - 3 列，固定标题，固定侧边栏，内容可滚动

Question

任何人都可以协助我进行以下 div 布局吗？我已经尝试了几个解决方案，但是，我能够完成此任务的唯一方法是使用表格。

我看过Holy Grail 3 Column Layout , 然而，这个layoyt不是100%高度，header也不是固定的，我也只需要滚动的内容，侧边栏需要固定100%高度

Answer 1

这里的答案似乎忽略了您的大部分要求。我偶然发现了这一点，因为我遇到了与您所追求的布局相同的渲染问题。我 fork 了上面的 fiddle 给你看:

http://jsfiddle.net/RsRf9/2/

主要区别在于整个 body 都是可滚动的，而不仅仅是中心的小区域(我认为这就是您所追求的)。

除了清理那些没有做任何事情的样式(比如固定位置的 float )之外，主要的变化是中心列——你只需要这样:

.center{margin:100px 200px;}

另一个变化是如何在侧边栏上获得“高度 100%”效果 - 我的技巧是这样做:

.left,.right{width:200px;top: 100px; bottom: 0px;position: fixed;}

我只是告诉它从顶部 100(导航底部)延伸到底部 0(页面底部)，而不是高度 100%

这会将内容推送到顶部导航下方和两个固定侧边栏之间。