在CSS和HTML中为聊天室创建布局

Question

我正在使用Rails构建聊天客户端和服务器。我选择使用Bootstrap作为前端。但是我的HTML和CSS技能非常有限，我在创建聊天布局时遇到了麻烦，我的目标是类似于skype。

这是对我想要实现的目标的嘲弄。

Chat Layout

我试图让所有内容保持在100％的浏览器视口中。因此，聊天消息列表具有溢出滚动。我可以获得总体布局，但我无法弄清楚是否将其全部保存在视口中。任何人都可以帮忙吗？

干杯

Answer 1

在引导程序中，您需要在声明聊天参与者列表和聊天显示所需的两列之前声明导航栏（固定顶部和导航栏折叠）。页面正文与col-lg-3和col-lg-9类似。假设你有bootstrap 3.0它会响应。我不开发rails应用程序，但在Grails（类似于Java的MVC框架）中，您还必须自动删除Grails包含的默认样式，以确保Bootstrap是页面样式的CSS。

一个例子是其页面上的jumbotron模板Bootstrap包含。省略了jumbotron并改变了身体的柱宽，你应该得到与你正在努力的结果非常相似的结果。

如果您确实希望页面扩展到页面边缘，请不要在第77行包含div class='container'。