Нижний колонтитул находится внизу одной HTML-страницы, но в середине другой

Question

Я пытаюсь установить нижний колонтитул внизу страницы для каждой HTML-страницы.

На моей главной странице указателя она расположена внизу, потому что у меня есть несколько разделов на странице, которые включают блок текста и видео, расположенные рядом над нижним колонтитулом.

Вкл.Еще одна HTML-страница. У меня только есть панель навигации и стиль нижнего колонтитула.Основной тег не имеет содержимого.Нижний колонтитул на этой странице находится на полпути вверх по экрану.

Я просматривал различные решения и пробовал bottom: 0, а также position: fixed и position: absolute, но абсолютный только вызывает нижний колонтитул на моемглавная страница, чтобы скрыть горизонтальную линию между текстовым / видео разделом и нижним колонтитулом, а также самую нижнюю часть видео и текста.Исправлено приводит к тому, что он располагается поверх всего содержимого, а в нижней части страницы действует так же, как и абсолютное.

.about {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 50%;
    font-size: 1.5em;
    float: left;
    height: 50vh;
    margin-top: 3em;
    left: 0;
    margin-bottom: 3em;
}

.videos {
    width: 50%;
    height: 50vh;
    float: left;
    margin-top: 3em;
    right: 0;
    margin-bottom: 3em;
}

.frontPageVideo {
    width: 95%;
    height: 100%;
}

footer {
    clear: both;
    background-color: rgb(0, 0, 0);
    height: 20vh;
    margin-top: 5em;
}

Как установить нижний колонтитул внизу каждой страницы?

Answer 1

В дополнение к ответу Рэя Хэтфилда я бы добавил его к элементу html. Вот что я всегда включаю в свои сайты:

html, body{
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
}

Answer 2

Дайте вашему телу правило min-height: 100vh css, чтобы ваша страница никогда не была короче окна просмотра.

Вы также можете рассмотреть возможность использования flex для создания макета верхнего / основного / нижнего колонтитула.

body {
  margin: 0;
}

.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main > * {
  flex: 1 1 auto;
  background: bisque;
}

.main header,
.main footer {
  flex: 0 0 30px;
  background: tomato;
}

<div class="main">
  <header>Header</header>
  <div>Content</div>
  <footer>Footer</footer>
</div>