Форма HTML-чата работает нестабильно - Django сайт

У меня есть сайт на django, на котором есть приложение чата. Проблема в том, что форма содержимого чата в приложении чата не остается в нижней части страницы чата, и пользователь должен отправить много сообщений, чтобы спуститься вниз по форме в приложении.

Как настроить ввод "chat_content", чтобы он оставался фиксированным в нижней части страницы chatapp?

HTML:

<!--HTMLcode-->

<div id="chat-right-bottom-box">
        <form action="{% url 'chat_single' current_reciever.user.username %}" method="POST">
          {% csrf_token %}
          <input type="text" name="chat_content" placeholder="Start a new message" id="chat-content" />
          <input type="file" name="chat_file" id="chat-file" />
          <input type="submit" name="chat_send_submit_btn" value="send" id="chat-send-submit-btn" />
        </form>
      </div>

    </div>

CSS:

#chat-right-bottom-box {
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
}

#chat-right-bottom-box form {
  width: 95%;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

#chat-content {
  display: inline-block;
  width: 78%;
  border: 1px solid #1DA1F2;
  border-radius: 25px;
  padding: 8px 10px;
}

#chat-content:focus {
  outline: none;
}

#chat-send-submit-btn {
  display: inline-block;
  width: 17%;
  color: white;
  background-color: #1DA1F2;
  border: 1px solid #1DA1F2;
  font-weight: 700;
  border-radius: 25px;
  padding: 8px 10px;
}

#chat-send-submit-btn:hover {
  cursor: pointer;
  transition: 0.2s;
  background-color: #1991DA;
  border-color: #1991DA;
}

 #chat-right-bottom-box {
    position: sticky;
    margin-bottom: 50px;
  }

форма должна работать правильно.

Вернуться на верх