1

因此，我正在为我的网站的消息/对话页面设计样式，但遇到了一些困难。

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

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

我想要的很像 Facebook 消息页面。

在此处输入图像描述

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

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

我不确定是否可以仅使用 CSS 来做到这一点，我很确定在某些时候我将不得不使用一些 Jquery，但我想用 CSS 来实现 CSS 中可能的一切。

我真的不知道如何做到这一点。

4

3 回答 3

0

另一种解决方案是设置以下 CSS-

对于标题

{position:fixed;top:0px;}

对于回复框

{position:fixed;bottom:0px;}
于 2012-08-25T11:27:30.690 回答
0

您可以尝试以下代码来设置消息 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
}

这是一个有效的现场演示。（在demo中，message div是左对齐的，你可以通过设置margin来改变它。如果你想让它在页面中间，尝试auto左右边距）

希望这可以帮助。

于 2012-08-25T12:55:25.583 回答
0

这是一个小演示：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-25T11:03:36.127 回答