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获取live example （为了清楚起见，两个元素的开始/结束位置添加了颜色）

渲染简单的聊天布局

1 个答案: