灵活和固定div的行在全尺寸窗口内

Question

我正在编写一个应该使用整个屏幕的移动/桌面聊天应用程序。如果需要，黄色显示的底部<div>可以是固定高度。

目前它绝对位于窗户的底部。

我的问题：青色的顶部<div>不适合窗口的其余部分，无论我是否使用填充，边距，边框等。目前它出现允许内容换行，但这只是因为底部会覆盖滚动条。

到目前为止，我唯一的解决方案是使用最终<div>或<br>填充可滚动div的末尾，但这不会使div更小，或使滚动条正确对齐

Here is my source code so far in Fiddle

Answer 1

你能编辑CSS并将聊天文本设置为类似.break-word的类，然后在CSS中用word-wrap声明它：

.break-word {
    word-wrap: break-word;
}

不确定滚动条的覆盖范围。您应该发布您的代码供其他人查看，并且可以选择一些内容。

Answer 2

这个样式代码基本上总结了我正在做的事情，以弥补我的问题。 （而不是使用HTML表格。）这可能不是最好的解决方案。

#topPart {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 40px; /* or however high the bottom is */
}

#bottomPart {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 40px; /* same as above */
}