中心对齐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; 
} 

要让滚动条工作正常，你可以设置overflow财产上#chat。

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