Estoy tratando de pegar un pie de página en la parte inferior de una página que muestra algunas publicaciones a través de un bucle en un archivo ejs . A continuación se muestra mi código:

 <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; }

Por alguna razón, el pie de página se pega correctamente en otras páginas renderizadas, pero en esta se muestra así:

No puedo entender qué está mal aquí. ¿Alguna sugerencia?