Нижний колонтитул, охватывающий содержимое страницы

Question

Я работаю над этим небольшим личным проектом, использующим Django для бэкэнда и загрузчик во фронтэнде.

Здесь вы можете найти распечатку, которая показывает мою проблему. Проблема в том, что в списке есть элемент под элементом «Диадема», но мой нижний колонтитул закрывается, а полоса прокрутки не отображается.

Я новичок в fron-end, возможно, мне следовало бы не использовать нижний колонтитул с фиксированным нижним пределом, а "всегда внизу страницы".

Я не нашел ответа на этот вопрос, пожалуйста, помогите мне.

Вот несколько полезных файлов:

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

• сама страница:

{% 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 %}

• здесь html, которому принадлежит нижний колонтитул, 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

Решение 1 (display: flexbox)

Это решение, если вы хотите, чтобы макет всегда занимал все пространство страницы.

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>

Решение 2 (position: fixed)

Ваша проблема в том, что вы использовали position: fixed - для этого элемент помещается над всеми остальными, как будто он не вложен внутрь чего-либо. Если вы хотите, чтобы это было так, вам понадобится фиксированный верхний и нижний колонтитулы, а затем вы можете использовать calc(), чтобы определить допустимый размер тела.

Вот пример с прокручиваемым телом:

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>

А вот еще один со статическим заголовком (обратите внимание, что в этом случае заголовок не должен быть фиксированной высоты):

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>