Javascript 聊天-当元素到达底部时，将绝对位置更改为相对位置

我创建了一个聊天室，用户可以在其中输入文本。当他输入文本并按Send（或enter）时，文本位于输入字段上方。这样地：

所需内容：我希望输入字段位于页面底部。我使用

位置：绝对


但是当聊天室有很多字段时，您无法向后滚动查看聊天室。

当我将位置设置为
位置：相对，您可以向后滚动聊天记录


所以我的问题是：

如何将输入字段设置为始终位于底部，并且当聊天文本到达顶部时，用户应该能够滚动回顶部。

以下是HTML：

<div class="container custom_chat">
    <div class="box box-warning direct-chat direct-chat-warning">
        <div class="box-body">
            <div class="direct-chat-messages">
                <div class="direct-chat-msg" ng-repeat="message in listOfMessages track by $index" ng-class="{'right':!message.me}">
                    <div class="direct-chat-info clearfix" style="margin-top:20px;">
                        <span class="direct-chat-timestamp " ng-class="{'pull-left':message.me, 'pull-right':!message.me}">{{ message.timeMessage }}</span>
                        <span class="direct-chat-name" ng-class="{'pull-left':!message.me, 'pull-right':message.me}"><strong>{{ message.senderFirstName }}</strong></span>
                    </div>
                    <div class="direct-chat-text right">
                        <span style="word-break: break-all;">{{ message.content }}</span>
                    </div>
                </div>
            </div>
            <div class="box-footer" style="margin-top:20px">
                <form ng-submit="sendMessage()">
                    <div class="input-group">
                        <input type="text" placeholder="Type message..." autofocus="autofocus" class="form-control" ng-model="message.content" ng-enter="sendMessage()">
                        <span class="input-group-btn">
                        <button type="submit" class="btn btn-warning btn-flat">Send</button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

我尝试过在这个div之外使用一个容器，并将容器的位置设置为：relative；
我不明白offSet在这里能帮我什么忙。请解释是否使用偏移量。
首先，您需要将聊天区与输入字段分开

对于
ol
元素，由于您使用的是angularjs，因此可以
ng repeat
在聊天时创建
li
元素。

大概是这样的：

    <div class="custom_chat">
        <ol id="messages" class="chat-messages"></ol>

        <div class="box-footer">
          <form id="message-form">
            <input name="message" placeholder="Type message..." autofocus>
            <button type="submit" class="btn btn-warning btn-flat">Send</button>
          </form>
        </div>
    </div>

我认为您使用
position:absolute
的方法很好。但是您需要将
溢出：auto
设置到您的
聊天区

检查下面的代码示例


var formatsApp=angular.module（'formatsApp'，[]）；
formatsApp.controller（'LinksController'，函数LinksController（$scope）{
$scope.listOfMessages=[“asdasd”]
$scope.message=“”；
$scope.sendMessage=函数（x）{
$scope.listOfMessages.push（$scope.message）
}
});
。直接聊天信息，
.box页脚{
位置：绝对位置；
底部：30px；
宽度：40%；
左缘：33%；
}
.直接聊天信息{
溢出：自动；
最大高度：100%；
}
身体{
高度：400px；
}

{{message}}

{{message.content}
发送
非常感谢！我完全忘记了溢出。这对我有用。
    <div class="custom_chat">
        <ol id="messages" class="chat-messages"></ol>

        <div class="box-footer">
          <form id="message-form">
            <input name="message" placeholder="Type message..." autofocus>
            <button type="submit" class="btn btn-warning btn-flat">Send</button>
          </form>
        </div>
    </div>

.custom_chat {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

.chat-messages {
  flex-grow: 1;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.box-footer {
  background: #e6eaee;
  display: flex;
  padding: 10px;
  flex-shrink: 0;
}

.box-footer form {
  flex-grow: 1;
  display: flex;
}

.box-footer form * {
  margin-right: 10px;
}

.box-footer input {
  border: none;
  padding: 10px;
  flex-grow: 1;
}

.chat-messages {
  list-style-type: none;
  padding: 10px;
}