呈現簡單的聊天佈局

我目前正在設計一個聊天網站。佈局將非常簡單。呈現簡單的聊天佈局

我想要一個包含所有屏幕但屏幕底部爲屏幕底部預留的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

呈現簡單的聊天佈局

回答

相關問題