html - 渲染一个简单的聊天布局

Question

我目前正在设计一个聊天网站。布局将非常简单。

我想要一个包含所有消息的 div，但屏幕底部的 20 像素为表单字段保留以发送消息。

HTML 代码可能如下所示：

<div id="messages">
...
</div>
<input type="text" id="message" />

如何使用 CSS3 呈现这种布局？

Answer 1

我看不出在这种情况下使用绝对定位有什么问题：

#messages {
    position: absolute;
    top: 0;
    bottom: 20px;
    left: 0;
    right: 0;
    overflow: auto;
}

#message {
    position: absolute;
    bottom: 0;
    height: 20px;
    left: 0;
    right: 0;
}

请参阅此 jsFiddle 以获取实时示例 （为清楚地了解两个元素的开始/结束位置，添加了颜色）