Нижний колонтитул не остановится на мобильной версии

Question

Хей. При открытии этой страницы на мобильном телефоне нижний колонтитул находится не внизу страницы. Когда я открываю проверку в браузере, я вижу, что тэг продолжается, не останавливаясь на нижнем колонтитуле Я попытался добавить HTML {height:100%;} и HTML {max-height:100%;} в CSS файл, но ничего не произошло. На картинке видно, в чем проблема. > Это происходит только на этой странице, у меня есть другие страницы на сайте, и у меня нет этой проблемы.

Предварительный просмотр для мобильной версии

Это мой код:

CSS

.map-container {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.map-container iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.navigacija-link {
  color: #dcfd50 !important;
  font-weight: 700;
  font-size: larger;
}

.navigacija-link:hover {
  color: white !important;
  font-weight: 700;
  font-size: larger;
  text-decoration: underline !important;
}

.navigacija-podlink {
  color: #dcfd50 !important;
  font-weight: 500;
  font-size: large;
}

.navigacija-podlink:hover {
  color: black !important;
  font-weight: 500;
  font-size: large;
  text-decoration: underline !important;
}

Answer 1

Пожалуйста, добавьте этот код в css:

footer {
   position: absolute;
   bottom: 0;
   width: 100%;
}

Answer 2

Попробуйте это flex-direction: column; для тела и margin-top: auto; для нижнего колонтитула

.map-container {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}
body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
footer{
    margin-top: auto;
}

.map-container iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.navigacija-link {
  color: #dcfd50 !important;
  font-weight: 700;
  font-size: larger;
}

.navigacija-link:hover {
  color: white !important;
  font-weight: 700;
  font-size: larger;
  text-decoration: underline !important;
}

.navigacija-podlink {
  color: #dcfd50 !important;
  font-weight: 500;
  font-size: large;
}

.navigacija-podlink:hover {
  color: black !important;
  font-weight: 500;
  font-size: large;
  text-decoration: underline !important;
}

Answer 3

Добавьте этот метатег в ваш файл html в разделе head.

<meta name="viewport" content="width=device-width, initial-scale=1.0">