如何让网页上的右侧滚动条仅滚动中间窗格

如果您查看Facebook中的消息页面，有一个标题，下面有三个部分。滚动条控制中间部分，左侧和右侧部分保持静止。我如何在我的网页上实现相同的行为？这是一切都保持不变，滚动条只控制中间部分？顺便说一下，Facebook的实施在Chrome中无法正常工作，并且在Firebug开启时FF停止工作。如何让网页上的右侧滚动条仅滚动中间窗格

来源

2011-11-12 Barka

你不需要在中心部分设置任何特别的东西。每个要保持静止的块元素都需要有position: fixed;。

如

<html> 
    <head> 
    <style> 
     body { 
     margin: 0; 
     padding: 0; 
     } 
     header { 
     display: block; 
     position: fixed; 
     z-index: 10; /* keeps the header over the content as the content gets scrolled */ 
     top: 0; 
     width: 100%; 
     height: 100px; 
     padding: 10px; 
     background-color: black; 
     } 
     #sidebar { 
     position: fixed; 
     top: 120px; /* add height + padding of header */ 
     left: 0; 
     width: 150px; 
     padding: 10px; 
     background-color: blue; 
     } 
     #content { 
     margin: 120px 0 0 170px; /* add adjacent elements' size + padding */ 
     padding: 10px; 
     } 
    </style> 
    </head> 
    <body> 
    <header> 
     This will stay on the top of the browser window. 
    </header> 
    <div id="sidebar"> 
     This will stay on the left. 
    </div> 
    <div id="content"> 
     This will scroll normally. 
    </div> 
    </body> 
</html>

来源

2011-11-12 23:39:22 Preacher

侧边栏停留在头部的顶部。是故意的吗？我不会浪费我的一分，只是为了移除你的两分。 –

这对你而言并不诚实：你只是通过编辑帖子来打电话给我，而不提你最初的错误。 –

感谢您的支持。 – Preacher

如何让网页上的右侧滚动条仅滚动中间窗格

回答

相关问题