我想制作聊天应用程序。我的问题是,当我的文本框增加它的高度时,聊天容器会从底部减小它的高度。
我希望聊天容器从顶部减小它的高度。 例如:
这是我的聊天框外观。而且,当我的文本框增加它的高度时,它会像这样显示
我的期望是这样的
而且,当聊天容器不在底部时,它们也会从顶部减小它的高度。像这样
这是我的代码
.chat-container, .chat-content, p, .chat-input {
box-sizing: border-box;
padding: 10px;
border: 2px solid black;
}
.chat-container {
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
}
.chat-content {
width: 100%;
overflow: auto;
flex-grow: 1;
}
.input-here {
width: 100%;
max-height: 150px;
}
.input-here {
border: 2px solid red;
}

<div class="chat-container">
<div class="chat-content">
<p>Hello</p>
<p>This is example words.</p>
<p>This is another example #1</p>
<p>This is another example #2</p>
<p>This is another example #3</p>
<p>This is another example #4</p>
<p>This is another example #5</p>
</div>
<div class="chat-input">
<div contenteditable="true" class="input-here"></div>
</div>
</div>
&#13;
抱歉我的英语不好。 非常感谢你。
答案 0 :(得分:0)
我认为这就是你所需要的。变化:
// Store your div in a variable
var objDiv = document.getElementById("chat");
// Execute the function once on load
myFunction();
function myFunction() {
objDiv.scrollTop = objDiv.scrollHeight;
}
.chat-container,
.chat-content,
p,
.chat-input {
box-sizing: border-box;
padding: 10px;
border: 2px solid black;
}
.chat-container {
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
}
.chat-content {
width: 100%;
overflow: auto;
flex-grow: 1;
}
.input-here {
width: 100%;
max-height: 100px;
overflow-y: scroll;
}
.input-here {
border: 2px solid red;
}
<div class="chat-container">
<div class="chat-content" id="chat">
<p>Hello</p>
<p>This is example words.</p>
<p>This is another example #1</p>
<p>This is another example #2</p>
<p>This is another example #3</p>
<p>This is another example #4</p>
<p>This is another example #5</p>
<p>This is another example #6</p>
<p>This is another example #7</p>
<p>This is another example #8</p>
</div>
<div class="chat-input">
<div contenteditable="true" class="input-here" onkeyup="myFunction()"></div>
</div>
</div>