用於消息傳遞系統滾動消息的CSS並始終將回復框保留在屏幕底部

因此，我正在設計我的網站的消息/對話頁面，並且遇到了一些困難。用於消息傳遞系統滾動消息的CSS並始終將回復框保留在屏幕底部

這就是我最終想要解決的問題。打開對話時，最後15-20條消息將被加載到一個div中，但我希望div適合一個頁面。我的意思是，div應該是屏幕的高度，我想上下滾動的唯一東西就是消息。

我的網站的標題應始終可見。當您向下滾動並進入對話結束時，整個頁面向下滾動一下以顯示我網站的頁腳。

我想要的東西看起來很像Facebook消息傳遞頁面。

enter image description here

我不知道，如果你能明白我的要求，所以我將與Facebook的消息頁面一個小例子（滾動條不上圖片）。在圖像中，當你加載頁面時你會得到什麼，如果你向下滾動，將會出現頁腳，如果你向上滾動回覆框將會粘在屏幕的底部，唯一移動的是對話（中間的紅色方塊）

一旦這將起作用，我將添加一個功能來加載消息，一旦你到達加載的消息的頂部。

如果只用CSS就可以做到這一點，我不會說，我很肯定我必須在某個時候使用一些Jquery，但是我想用CSS來做所有可能的CSS。

我沒有真正的想法如何做到這一點。

來源

2012-08-25 Joris Blanc

這是一個小小的演示：little link。基本的和足夠的相關CSS是：

html, body { 
    height: 100%; /*100% of window*/ 
} 
#messages { 
    height: 80%; /*limit the height to 80% of the page*/ 
    overflow-y: auto; /*messages don't fit? add scrollbars*/ 
}

HTML：

<div id = "messages"> 
    <div class = "message">Glee is awesome!</div> 
    <div class = "message">Glee is awesome!</div> 
    <div class = "message">Glee is awesome!</div> 
    ... 
</div> 
<div>...Stuff for sending here...</div>

希望在任何方式幫助！

來源

2012-08-25 11:03:36 Chris

另一個解決方案是設置以下CSS-

對於頭

{position:fixed;top:0px;}

對於replybox

{position:fixed;bottom:0px;}

來源

2012-08-25 11:27:30 rzr

您可以嘗試類似代碼的東西下面風格你的消息格;

#yourdiv { 
    position: absolute; 
    top: 35px; //This is the height of your header. 
    width: 400px;//Width of your message div. 
    bottom: 0; 
    background-color: gray; 
    overflow-y: auto;//Only scrolls vertically 
}

Here是一個工作現場演示。（在演示中，消息div是左對齊的，你可以通過設置邊距來改變它，如果你想使它在頁面中間，試試auto左右頁邊距）

希望這會有所幫助。

來源

2012-08-25 12:55:25

用於消息傳遞系統滾動消息的CSS並始終將回復框保留在屏幕底部

回答

相關問題