Как создать липкий нижний колонтитул, который работает с мобильными и настольными компьютерами?

Question

Я просмотрел много разных постов, и, похоже, нет хорошего, рабочего решения.Я хотел бы, чтобы нижний колонтитул находился внизу страницы независимо от того, просматривается ли веб-сайт на мониторе с рабочего стола или iPhone в Safari.

Текущий код CSS:

body {
    margin-bottom: 60px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px; 
    background-color: #f5f5f5;
}

HTML-код:

<footer class="footer">
  <div class="container">
    <span class="text-muted">text</span>
  </div>
</footer>

Нижний колонтитул в настоящее время находится внизу страницы на рабочем столе и в середине страницы в мобильном Safari.

Answer 1

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

Что вам нужно сделать, это добавить медиа-запрос для мобильных устройств.Что-то вроде:

@media screen and (max-width: 1024px){
  body{
   margin-bottom: 0;
  }
  .footer {
    position: relative;
  }
}