居中对齐 div 到可滚动 div 的底部

Question

<div class="chat-space">

    <ol id="chat" class="discussion">
        <!-- Chat messages get added here -->
    </ol>

    <div id="chat-box">
        <input id="message"></input>
        <button onclick="sendMessage()">Send</button>
    </div>       
</div>

如何让 chat-box div 始终位于 chat-space div 的底部并居中，chat-space div 在聊天消息到达时变得可滚动，我想能够滚动浏览底部带有 input 的消息。

这是 chat-space div 的 CSS 代码：

.chat-space {
    background-color: #4B6B8B;
    overflow-y: auto;
    width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

Answer 1

可以做成绝对位置，设置bottom值。只需使用 text-align:center 将元素居中。

#chat-box {
    position: absolute;
    width: 100%;
    height: 30px;
    text-align: center;
    left: 0;
    bottom: 0;
}

要使滚动条正常工作，您可以在 #chat 上设置 overflow 属性。

#chat {
    overflow-y: auto;
    height: calc(100% - 30px);
    margin: 0;
}

http://jsfiddle.net/9wuyzznL/4/

Answer 2

.chat-space{
  position:relative;
  border:1px solid #ccc;
  width:200px;
  margin:0 auto;
  padding:10px;
}

ol {
  height:150px;
  overflow:auto;
}

.chat-box {
  text-align:center;
  position:fixed;
  bottom:0;
  background:#ccc;
  border-top:1px solid #333;
  padding:5px;
}

button {
  display:block;
  width:100%;
  border:0;
  margin:0;
  padding:0;
  background:none;
  border:1px solid #ccc;
}

input{
  width:100%;
  display:block;
  margin-bottom:10px;
}

<div class="chat-space">

    <ol id="chat" class="discussion">
        
      <li>Message 1</li>
      <li>Message 2</li>
      <li>Message 3</li>
      <li>Message 4</li>
      <li>Message 5</li>
      <li>Message 6</li>
      <li>Message 7</li>
      <li>Message 8</li>
      <li>Message 9</li>
      <li>Message 10</li>
      <li>Message 11</li>
      <li>Message 12</li>
      <li>Message 13</li>
    </ol>

    <div id="chat-box">
        <input id="message"></input>
        <button onclick="sendMessage()">Send</button>
    </div>       
</div>

居中对齐 div 到可滚动 div 的底部

Center align div to the bottom of scrollable div

html

css

alignment