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将元素保留在最右边。

在这里更新了小提琴。

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;
}