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

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

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

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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

将div对齐到可滚动div的底部

2 个答案: