呈现简单的聊天布局

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

我想要一个包含所有屏幕但屏幕底部为屏幕底部预留的20个像素的div来发送消息。

的HTML代码看起来是这样的：

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

如何使用CSS3渲染这种布局的？

来源

2012-07-28 Cydonia7

...不知道你正在使用什么样的标记，以及你想要它看起来像什么，我们应该如何开始回答这个问题？请记住，'HTML代码可能看起来像'*任何东西* ... – 2012-07-28 18:34:58

我描述了我希望它看起来像我想...看到上面的HTML代码。就像两个街区一样简单。 – Cydonia7 2012-07-28 18:38:13

就是这样吗？这是你的问题的全部？如何在页面上放置两个块？ – 2012-07-28 18:39:18

我看不出有什么不对使用绝对定位在这样的情况：

#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 （颜色增加了清晰度，以在两个元素开始/结束）

来源

2012-07-28 18:36:58

我不认为这会很容易，尽管它完美的作品。感谢您的帮助！ – Cydonia7 2012-07-28 18:40:37

呈现简单的聊天布局

回答

相关问题