CSS：將兩個div對齊到頁面底部的位置：絕對

Question

我想在css中創建一個帶有標題的簡單聊天室，我嘗試將聊天對齊到頁面底部，並在頁面的右側。我曾嘗試使用

float: right; 
bottom: 0; 
position: absolute; 

它將其與頁面底部對齊，但不在右側。這裏是我完整的代碼

CSS

#chatbox { 
    height: 360px; 
    width: 320px; 
    border-left: 1px solid #000; 
    border-right: 1px solid #000; 
    border-bottom: 1px solid #000; 
    float: right; 
    bottom: 0; 
    position: absolute; 
} 
.chatheader { 
    font-family:'PT Sans'; 
    background: #999; 
    width: 322px; 
    height: 36px; 
    color: #fff; 
    text-align: center; 
    padding-top: 15px; 
} 

HTML

<div class="chatheader">chatboxheader</div> 
<div id="chatbox"> 

</div> 

下面是代碼DEMO 的演示這只是一個非常簡單的腳本，因爲我想獲得它對齊首先，稍後我會讓它看起來更好。在此先感謝任何能夠幫助我的人！

Answer 1

既然您希望chatheader和chatbox位於頁面右下角。我修改了一些代碼。我把它們都包裝在一個div中。

HTML：

<div id="chat-container"> 
    <div class="chatheader">chatboxheader</div> 
    <div id="chatbox"></div> 
</div> 

CSS：

#chat-container { 
    right :0; 
    bottom: 0; 
    position: absolute; 
} 

right:0將保持在元件上最右邊。

Updated fiddle here.

Answer 2

DEMO

HTML

#chatbox { 
    height: 360px; 
    width: 320px; 
    border-left: 1px solid #000; 
    border-right: 1px solid #000; 
    border-bottom: 1px solid #000; 
} 
.chatheader { 
    font-family:'PT Sans'; 
    background: #999; 
    width: 322px; 
    height: 36px; 
    color: #fff; 
    text-align: center; 
    padding-top: 15px; 
    float:right; 
} 
.chatMain { 
    position:absolute; 
    bottom:0; 
    right:0; 
}