从顶部减少div的高度，而不是从底部减少

Question

我想制作聊天应用程序。我的问题是，当我的文本框增加它的高度时，聊天容器会从底部减小它的高度。

我希望聊天容器从顶部减小它的高度。 例如：

这是我的聊天框外观。而且，当我的文本框增加它的高度时，它会像这样显示

我的期望是这样的

而且，当聊天容器不在底部时，它们也会从顶部减小它的高度。像这样

这是我的代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

抱歉我的英语不好。 非常感谢你。

Answer 1

我认为这就是你所需要的。变化：

• 使用onkeyUp函数输入输入时，添加了一些javascript以将聊天内容滚动到底部。
• 溢出y：滚动添加到聊天输入中，以便文本不会溢出最大高度，否则通常会这样做。
• 您也可能希望将.input-here的最大高度降低到更低的值，它看起来会更好。希望，这有帮助。

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