帶滾動條的固定盒？

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

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

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

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

http://jsfiddle.net/uWY5S/

在上面的例子中

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

來源

2013-08-27 Madam Zu Zu

一個的jsfiddle將是有益的 – ars265

它不是特別清楚你所需要的 - 你可以提供一些額外的信息嗎？ –

當然！我現在就做一個！謝謝！ –

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

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

來源

2013-08-27 19:02:36

謝謝！你還有什麼別的東西嗎？它似乎在你的例子中工作，但它仍然不起作用在我的應用程序 –

不。剛剛增加了高度。可能有其他一些代碼覆蓋此框。使用開發人員工具（通常是F12）來檢查應用了哪些CSS。另外，嘗試添加'！important'。 –

我改變了高度從5到PX，它的工作。謝謝！ –

我建議具有固定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;}

來源

2013-08-27 19:02:55 peterchon

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

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

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

來源

2013-08-27 19:10:02 DACrosby

帶滾動條的固定盒？

回答

相關問題