在特定區域內滾動頁面內容？

Question

我正在設計一個固定寬度佈局的外邊上有固定元素的網站。中心的div是爲內容保留的。

當用戶滾動時，我希望所有內容（除了所述固定的外部導航元素之外）留在該中心元素的邊界內。

這裏是我的意思是一個快速的樣機： alt text http://i35.tinypic.com/15s3cax.png

我可以很容易地設置中心元素汽車的overflow屬性，並且擁有一切仍然裏面。但是，在該元素的邊緣不存在滾動條是非常重要的。

基本上，我不知道如何可以：

• 內容限制該區域 （也許我可以改變大小和身體元素的 定位 - 是 ，允許 - 和？然後定位 固定元件 身體外部
• 隱藏使用 溢出時出現 在div內的滾動條：汽車

任何幫助將不勝感激！

Answer 1

如果可能，您應該將固定位置元素分成4個獨立的部分（頂部，左側，右側和底部）。然後，只需確保你墊，你由各自的寬度和高度中心內容區域，這樣的內容沒有得到重疊：

HTML

<!-- 4 fixed position elements that will overlap your content --> 
<div id="top"></div> 
<div id="left"></div> 
<div id="right"></div> 
<div id="bottom"></div> 

<div id="content"> 
    <!-- Your content --> 
</div> 

CSS

html, body { 
    height: 100%; 
} 

#top, #left, #right, #bottom { 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 2; 
    background: red; 
} 

#top, #bottom { 
    width: 100%; 
    height: 20px; 
} 

#bottom { 
    top: auto; 
    bottom: 0; 
} 

#left, #right { 
    height: 100%; 
    width: 20px; 
} 

#right { 
    left: auto; 
    right: 0; 
} 

#content { 
    position: relative; 
    z-index: 1; 
    padding: 25px; /* prevent content from being overlapped */ 
} 

你可以看到它in action here。

另請注意位置：內容區域的相對位置。這樣z-index才能正常工作，並且內容顯示在固定部分的下方。

如果你關心IE6/7的支持，你需要添加一個CSS expression fix以獲得固定位置在那些真棒瀏覽器中正常工作。