Блог

Главная - Вопросы по программированию - Липкий нижний колонтитул, принудительно расположенный снизу на короткой странице

Липкий нижний колонтитул, принудительно расположенный снизу на короткой странице

#css #sticky

#css #липкий

Вопрос:

Ниже приведен очень простой пример проблемы, с которой я столкнулся из-за липкого нижнего колонтитула. Когда содержимое страницы не заполняет область просмотра, нижний колонтитул обрабатывается как статически расположенный элемент. Я понимаю, что технически это предполагаемое поведение position: sticky , но мне интересно, есть ли способ заставить его всегда быть таким position: fixed в подобных ситуациях. Я не хочу удалять элемент из потока документов, поэтому я не просто меняю его на фиксированный навсегда. Кроме того, страница может иметь переменную высоту (в зависимости от содержимого), поэтому поведение липкости было бы необходимо, если бы страница была длиннее окна просмотра.

 html { height: 100%; }
body { min-height: 100%; }
.content {
    width: 100%;
    max-width: 1140px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.footer {
    position: sticky;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}  
 <html>
  <body>
    <div class="content">
      Here is some sample content
    </div>
    <div class="footer">
      This is the sticky footer
    </div>
  </body>
</html>

Ответ №1:

Этот код изменит стиль вашего нижнего колонтитула на основе высоты документа относительно высоты окна.

 function init() {
    if (window.innerHeight < document.body.clientHeight) {
        document.querySelector(".footer").style.position = "sticky";
    }
    else {
        document.querySelector(".footer").style.position = "fixed";
    }

window.onload = init;

Комментарии:

1. Технически это сработает, если вы удалите минимальную высоту, которая у меня есть в теге body. Хотя я надеялся избежать решения на JS и использовать чистый CSS.