3列,固定标题,侧边栏固定,内容可滚动

Question

任何人都可以帮助我进行以下div布局吗？我已经尝试了几种解决方案,但是,我能够实现这一目标的唯一方法是使用表格.

我看了一下Holy Grail 3 Column Layout,然而,这个layoyt不是100%高度,并且标题没有固定,我也只需要内容滚动,侧边栏需要固定100%高度

Answer 1

这里的答案似乎忽略了你的大多数要求.我偶然发现了这一点,因为我遇到的渲染问题与您所使用的布局相同.我把上面的小提琴分开给你看:

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

主要区别在于整个身体是可滚动的,而不仅仅是中心的小区域(我认为这就是你所追求的).

除了清理没有做任何事情的样式(如固定位置时的浮动),主要的变化是中心col - 所有你应该需要的是:

.center{margin:100px 200px;}

另一个变化是如何在你的侧边栏上获得"高度100%"的效果 - 我的诀窍就是:

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

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

这将推动内部导航器和两个固定侧杆之间的内容.