如何讓網頁上的右側滾動條僅滾動中間窗格

如果您查看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

如何讓網頁上的右側滾動條僅滾動中間窗格

回答

相關問題