Footer covering page content

Question

I'm working on this little personal project using Django for the back-end and bootstrap in the front-end.

Here you can find a print that shows my problem. The problem is: the list has an item below the item "Diadema" but my footer is covering and a scroll bar does not appear.

I'm newbie on fron-end stuff, maybe I should not have used a fixed-bottom footer but rather a "always at the bottom of the page".

I did not find an answer to this question, please help me.

Here some useful files:

• style.css

.custom-link {
    color: #ffffff;
}
a:visited{
    color: #ffffff;
}
a:hover{
    color: #a3a3a3;
}
a:active{
    color: #a3a3a3;
}

.custom-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #00702e;
  color: white;
  text-align: center;
}

.footer-row-1{
    padding-top: 3px;
    padding-bottom: 13px
}

.footer-row-2{
    padding-top: 10px;
}

• the page itself:

{% extends "base.html" %}
{% load static %}
{% block title %}
<title>Listagem | Aliens </title>
{% endblock %}
{% block navbar %}
<div class="collapse navbar-collapse justify-content-between" id="navbarNav">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="{% url 'aliens:home' %}">Home <span class="sr-only"></span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{% url 'aliens:register' %}">Cadastro</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="{% url 'aliens:alien_list' %}">Listagem</a>
        </li>
        <li class="nav-item ">
            <a class="nav-link " href="{% url 'aliens:alien_counter' %}">Sumário</a>
        </li>
    </ul>
</div>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row"><div class="col"><br><br></div></div>
    <div class="row">
        <div class="col-3"></div>
        <div class="col-6">
            <table class="table table-bordered table-hover ">
                <thead align="center">
                    <th>Cidade</th>
                    <th>Estado</th>
                    <th>Data</th>
                </thead>
                {% for alien in aliens %}
                <tr align="center">
                    <td>{{ alien.city }}</td>
                    <td>{{ alien.state_name }}</td>
                    <td>{{ alien.date }}</td>
                </tr>
                {% endfor %}
            </table>
        </div>
        <div class="col-3"></div>
    </div>
</div>

{% endblock %}

• here the html that owns the footer, base.html page:

{% extends "base.html" %}
{% load static %}
{% block title %}
<title>Listagem | Aliens </title>
{% endblock %}
{% block navbar %}
<div class="collapse navbar-collapse justify-content-between" id="navbarNav">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="{% url 'aliens:home' %}">Home <span class="sr-only"></span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{% url 'aliens:register' %}">Cadastro</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="{% url 'aliens:alien_list' %}">Listagem</a>
        </li>
        <li class="nav-item ">
            <a class="nav-link " href="{% url 'aliens:alien_counter' %}">Sumário</a>
        </li>
    </ul>
</div>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row"><div class="col"><br><br></div></div>
    <div class="row">
        <div class="col-3"></div>
        <div class="col-6">
            <table class="table table-bordered table-hover ">
                <thead align="center">
                    <th>Cidade</th>
                    <th>Estado</th>
                    <th>Data</th>
                </thead>
                {% for alien in aliens %}
                <tr align="center">
                    <td>{{ alien.city }}</td>
                    <td>{{ alien.state_name }}</td>
                    <td>{{ alien.date }}</td>
                </tr>
                {% endfor %}
            </table>
        </div>
        <div class="col-3"></div>
    </div>
</div>

{% endblock %}

Answer 1

Solution 1 (display: flexbox)

This solution is if you want the layout to always take up the full space of the page.

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: white;
  display: flex;
  flex-direction: column;
}

.content {
  background-color: blue;
  flex: 1 0 auto;
}

.footer {
  background-color: red;
  flex: 0 0 auto;
}

<div class="content">Body Content</div>
<div class="footer">Footer Content</div>

Solution 2 (position: fixed)

Your problem is that you used position: fixed - what this does is place the element above all others, as if it is not nested inside of anything. If you want this to be the case, you are going to need a fixed height header and footer, and then you can use calc() to determine the allowable size of the body.

Here is an example with a scrollable body:

body {
  color: white;
  margin: 0;
}

.header {
  height: 50px;
  background-color: blue;
}

.body {
  height: calc(100vh - 50px - 75px);
  overflow: auto;
  background-color: red;
}
  .body .body-content {
    height: 2000px;
    position: relative;
  }
  .body .body-content .body-content-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
  }

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75px;
  width: 100%;
  background-color: green;
}

<div class="header">Header</div>
<div class="body">
  <div class="body-content">
    Body Content
    <div class="body-content-bottom">You have reached the bottom!</div>
  </div>
</div>
<div class="footer">Footer</div>

And here is one with a static header as well (notice in this case the header does not need to be a fixed height):

body {
  color: white;
  margin: 0;
}

.top {
  overflow: auto;
  max-height: calc(100vh - 75px);
  position: relative;
}

.header {
  background-color: blue;
}

.body {
  background-color: red;
  height: 2000px;
  position: relative;
}
  .body .body-content-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
  }

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75px;
  width: 100%;
  background-color: green;
}

<div class="top">
  <div class="header">Header</div>
  <div class="body">
    Body Content
    <div class="body-content-bottom">You have reached the bottom!</div>
  </div>
</div>
<div class="footer">Footer</div>