I am having trouble with placing my footer at the end of the page when there is only a little text. I added h-100 to the container to try and fix it.
<div class="container h-100" style="margin:40px;"> <!-- wrapper for all containers -->
However, when there is a lot of data on the page, the footer ends up overlapping with the data. How can I resolve this issue? An example is shown in the image below (black line represents the footer). https://i.sstatic.net/lOb0K.png
This is my code:
{% extends 'vacancy_list/base.html' %}
{% block content %}
<div class="container h-100" style="margin:40px;"> <!-- wrapper for all containers -->
{% for vacancy in vacancies %}
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-8">
<h1><a href="#">{{vacancy.title}}</a></h1>
</div>
<div class="col-md-4 text-right">
<p> 40000 </p>
</div>
</div>
</div>
<div class="card-body" style="white-space:normal">
<p> Описание вакансии: Компания Sixhands, занимающаяся разработкой мобильных приложений и веб-порталов в Санкт-Петербурге, ищет Backend-разработчика для создания серверной части мобильных приложений.
</div>
</div>
{% endfor %}
</div> <!-- wrapper end -->
{% endblock %}