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

Question

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

目前它绝对定位在窗口的底部。

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

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

到目前为止，这是我在 Fiddle 中的源代码。

Answer 1

你可以编辑你的 CSS 并设置带有聊天文本的 DIV 类，如 .break-word，然后在 CSS 中用自动换行声明它：

.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 */
}