在流星中设计聊天室的问题

Question

我正在尝试用流星创建一个非常简单的聊天室，我不知道如何让聊天框保持在页脚上方并且滚动条溢出。

这也是使用Bootstrap 3.

以下是模板：

<div class="chat-body">

    <div class="container">

        <div class="page-header">

            <h1>Chat room</h1>

        </div>

        <ul class="list-unstyled">

        {{#each messages}}

            <li class="chat-message">

                <span class="chat-name h3"> {{name}} </span> : {{text}}

            </li>

        {{/each}}

        </ul>

    </div>

</div>

<footer class="footer">

  <div class="container">

    <div class="input-group">

       <input type="text" class="form-control">

       <span class="input-group-btn">

       <button class="btn btn-default" type="button">SendMessage</button>

       </span>

    </div>

  </div>

</footer>

</template>

这是页脚的CSS：

.chat-body {
}
.footer {
   position: absolute;
   bottom: 0;
   width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

.chat-message {
    padding-bottom: 15px;
}

.chat-name {
}

消息只是占位符数据。我的问题是我应该如何构建这个，以便聊天框将填充页脚上方的可用页面并使用滚动条溢出消息。

页脚位于屏幕的底部，但正如图中所示，信息正好在它下方：

Answer 1

将您的页脚放入＆＃34;容器＆＃34; DIV。设定位置：相对;在容器div和padding-bottom：60px;然后您现有的页脚css应该将其推入容器div的60px底部填充，并将其保持在页面底部。