用于消息传递系统的CSS滚动消息并始终将回复框保留在屏幕底部

Question

所以我正在设计我的网站的消息/对话页面，我遇到了一些困难。

这是我想最终解决的问题。打开对话时，最后15-20条消息将被加载到div中，但我希望div适合一页。我的意思是div应该是屏幕的高度我唯一想要向上和向下滚动的是消息。

我的网站标题应始终可见。当您向下滚动并到达对话结束时，整个页面向下滚动一点以显示我网站的页脚。

我想要的几乎就像Facebook消息页面。

我不知道你是否能理解我的要求，所以我在Facebook消息页面添加了一个小例子（滚动条不在图片上）。在图像中，这是你加载页面时得到的，如果你向下滚动将会出现如果你向上滚动回答框将会出现的页脚将粘在屏幕的底部，唯一移动的是谈话（中间的红色方块）

一旦这将起作用，我将添加一个功能，一旦你到达加载的消息的顶部加载消息。

如果只使用CSS可以做到这一点，我不会感到沮丧，我很确定在某些时候我将不得不使用一些Jquery但是我想用CSS制作CSS中的一切。< / p>

我不知道如何实现这一目标。

Answer 1

这是一个小小的演示：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>

希望以任何方式提供帮助！

Answer 2

另一个解决方案是设置CSS -

标题

{position:fixed;top:0px;}

对于回复箱

{position:fixed;bottom:0px;}

Answer 3

您可以尝试使用以下代码来设置消息div的样式;

#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）

希望这有帮助。