帶滾動條的固定盒？

Question

我有一些幫助文本，我希望用戶總是看到，即使他們已滾動到窗體的底部。

我現在有它的風格，像這樣：

/********** help text ********************/ 
.fixed-box { 
    position:fixed; 
    top:100px; 
width: 100%; 
    overflow:auto; 
} 

它的作品真棒！當我向下滾動時，它與我保持一致！但是當頁面可以處理的文本更多時，它會在底部切斷。有什麼方法可以確保幫助文本始終位於頂部，同時仍允許用戶向下滾動以查看其餘部分？

http://jsfiddle.net/uWY5S/

在上面的例子中

，文字始終是當我滾動頁面，這是真棒頂！但它切斷，用戶永遠無法得到讀取最後，如果主網頁內容不夠大:(

Answer 1

.fixed-box { 
    position:fixed; 
    top:5px; 
    width: 100px; 
    overflow:auto; 
    height: 100%; 
} 

http://jsfiddle.net/uWY5S/3/

Answer 2

我建議具有固定DOM內的另一個容器DOM ：

<div class="fixed"> 
    <div class="fixed-wrapper"> 
    <p>I scroll!</p> 
    </div> 
</div> 

CSS：

html, body {height:100%;} 
.fixed {position:fixed; height:100%; width:200px; background-color:black;} 
.fixed-wrapper {position:relative; overflow-y:auto; height:100%;} 
p {color:white; height:3000px;} 

Answer 3

嘗試增加bottom:__px添加到您的固定框類CSS中。

.fixed-box { 
    position:fixed; 
    top:5px; 
    bottom:20px; 
    width: 100px; 
    overflow:auto; 
} 

http://jsfiddle.net/daCrosby/uWY5S/4/