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

时间:2017-12-09 15:16:12

标签: javascript html css flexbox

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

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

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

我的期望是这样的

enter image description here

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

enter image description here

这是我的代码



.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;
&#13;
&#13;

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

1 个答案:

答案 0 :(得分:0)

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

  • 使用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>