html bootstrap slack風画面の作り方

Question

実現したいこと

djangoを使って、slack風のアプリを作ろうと思っていますが、うまくデザインができていません。現在は画像のようになっており、問題点としては、
①入力欄とリストがかぶってしまっており、一部見えない。(画像の状態以上に下スクロールはできません)
②画面を開いた時、リストが上に合わせて表示されてしまう(理想はslackのように、最新の投稿、つまり日付順に並んだリストの一番下に合わせて表示され、上にスクロールすることで過去の投稿を見れるようにしたい

の２点です。入力欄を画面下部に固定したかったため、現在はfooterを使ってとりあえずそれっぽいことをしてみました。
よろしくお願いいたします。

<table class="table mb-5">
  <thead class="thead-dark">
    <tr>
      <th>Chat</th>
    </tr>
  </thead>
  <tbody>
    {% for chat in chat_list %}
    <tr>
      <td><span style="color:gray">{{chat.user.user_name}}  /  {{chat.created_at}}</span><br><p>{{chat.chat_text}}</P></td>
    </tr>
    {% empty %}
    <td>課題やテストについてチャットで質問できます</td>
    {% endfor %}
  </tbody>
</table>

<footer style="position: fixed;bottom: 0; width: 90%;background-color: white;">
  <form action="" method="POST">
    {{form.non_field_errors}}
    {% for field in form %}
    <div class="form-group">
      {{field}}
      {{field.errors}}
    </div>
    {% endfor %}
    {% csrf_token %}
    <button type="submit" class="btn btn-outline-dark my-lg-4 my-4">チャットを投稿</button>
  </form>
</footer>

Answer 1

以下のようにするとどうでしょうか。

body {
	padding-bottom: 200px; /* 高さは適当に調整してください */
}