CSS：将两个div对齐到右侧页面的底部，其位置为：absolute

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

由于您需要页面右下角的聊天程序和聊天框。我修改了一点代码。我把它们都包裹在一个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;
}