TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超2個(gè)贊
假設(shè)你的輸入框是這樣寫(xiě)的:
<div class=input>
<input/>
</div>
相應(yīng)的樣式是這樣的:
.input {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
}
可以改成這樣:
首先是DOM:
<div class=input-wrapper>
<div class=input>
<input/>
</div>
</div>
其次樣式中加一個(gè):
.input-wrapper {
min-height: 30px;
}
相當(dāng)于在底部加了一個(gè)Placeholder, 如果你要希望永遠(yuǎn)在上面的話, 那你就要考慮使用單屏應(yīng)用了, 也就是讓整個(gè)page的高度和屏幕高度相同, 然后消息列表的滾動(dòng)只是滾動(dòng)自身的內(nèi)容. 如果這樣的話就好辦了, 直接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;
}
舉報(bào)