直接上代码：
注意：记得在目标元素上加overflow:auto;样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content {
width: 320px;
height: 320px;
border: 1ox solid #ddd;
box-shadow: 0px 0px 12px #ddd;
margin: 20px auto;
}
.title {
text-align: center;
}
.info {
width: 100%;
height: 90%;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="content">
<div class="title">
<h4>将滚动条（scrollbar）保持在最底部的方法</h4>
</div>
<div class="info" id="info" style="overflow:auto;">
</div>
<div class="footer">
<input type="text" style="width: 80%;" id="val"/>
<button id="btn" type="button" onclick="add()">发送</button>
</div>
</div>
<script type="text/javascript">
var oInfo = document.getElementById("info")
var oVal = document.getElementById("val")
var oBtn = document.getElementById("btn")
function add () {
oInfo.innerHTML = oInfo.innerHTML +`<p>${oVal.value}</p>`
oInfo.scrollTop = oInfo.scrollHeight
oVal.value = ''
}
</script>
</body>
</html>