聊天窗口问题

假设你的输入框是这样写的:<div class=input>    <input/></div>相应的样式是这样的:.input {    position: fixed;    bottom: 0;    left: 0;    right: 0;    height: 30px;}可以改成这样:首先是DOM:<div class=input-wrapper>    <div class=input>        <input/>    </div></div>其次样式中加一个:.input-wrapper {    min-height: 30px;}相当于在底部加了一个Placeholder, 如果你要希望永远在上面的话, 那你就要考虑使用单屏应用了, 也就是让整个page的高度和屏幕高度相同, 然后消息列表的滚动只是滚动自身的内容. 如果这样的话就好办了, 直接flex布局就OK:首先看DOM:<!DOCTYPE html><html><body><div class=chatroom>    <div class=messages>        <div class=message>...</div>    </div>    <div class=input>        <input/>    </div></div></body></html>然后是样式:html, body, .chatroom {    height: 100%;    min-height: 100%;}.chatroom {    display: flex;    flex-direction: column;}.messages {    display: flex;    overflow: auto;    flex-direction: column;    flex: 1;}.message {    display: flex;    flex-shrink: 0;}.input {    display: flex;    flex-direction: row;    height: 30px;    align-items: center;    justify-content: center;    flex-shrink: 0;}

聊天窗口问题

1回答