I'm trying to sticky a footer at the bottom of a page that renders some posts through a loop in an ejs file. Below is my code:

    <div class="container">
      <a href="/home" class="link">Go Back</a>

      <% for (var i = 0; i < rows.length ; i++) { %>
      <div class="row">
        <div class="col-md-8">
          <div class="media g-mb-30 media-comment">
            <div class="g-mb-15">
              <h5 class="h5 g-color-gray-dark-v1 mb-0">
                <%= rows[i]['username'] %>
              </h5>
            </div>
            <hr />
            <p><%- rows[i]['message'] %></p>
          </div>
        </div>
      </div>
      <% } %>

      <textarea
        class="mt-4"
        rows="5"
        cols="75"
        name="comment"
        form="usrform"
      ></textarea>
      <form action="/public_forum" id="usrform" method="POST">
        <input class="btn btn-primary mt-3 mb-3" type="submit" />
      </form>
    </div>
    <footer class="footer">
      <div class="container">
        <span class="text-muted">Acme Bar © 2021</span>
      </div>
    </footer>

styles.css:

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f5f5f5;
}

.media-comment {
  margin-top: 20px;
  border: 0.5px solid gray;
  padding: 9px;
  box-shadow: 1px 3px 3px gray;
}

For some reason the footer is stickied properly in other rendered pages, but in this one it shows like so:

Can't figure out what's wrong here. Any suggestions?