Блог

Я работаю над разработкой этого сайта и не понимаю, почему, когда я пытаюсь создать липкий нижний колонтитул для прокрутки страниц, таких как связанная, он не будет прокручиваться на мобильном устройстве (протестировано на iPhone в Safari и DuckDuckGo).). Моя цель — добавить липкий нижний колонтитул таким образом, чтобы нижний колонтитул всегда находился внизу страницы (а не в нижней части окна просмотра всегда).

Я попытался изменить расположение нижнего колонтитула с помощью fixed , absolute , или relative . Например fixed , он будет прокручиваться, но нижний колонтитул остается внизу того места, где изначально был видовой экран. Последние два приводят к невозможности прокрутки экрана на мобильном устройстве. Однако инструменты разработчика Chrome, использующие мобильное устройство (а именно iphone), приведут к желаемому поведению). Я пробовал различные учебные пособия, в том числе этот, по липким нижним колонтитулам.

В настоящее время мой нижний колонтитул отформатирован как таковой,

 .site-footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 30px;
background-color: white;
}
 

С адаптивной настройкой для мобильных устройств, которая изменяет пару параметров,

 .site-footer {
    position: relative;
    margin-bottom: 20px;
}
 

Я понимаю, что это не полный минимально воспроизводимый пример, но я изо всех сил пытаюсь создать что-то достаточно портативное, чтобы поделиться им здесь. Спасибо.

Удалите этот код, и у вас будет липкий 😉

 @media only screen and (max-width: 600px)
@media only screen and (min-width: 300px) and (max-width: 767px) {
  .site-footer {
    position: relative;
    margin-bottom: 20px;
  }
}