Липкий нижний колонтитул вынужден снизу на короткой странице - PullRequest
Новая
       14

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

0 голосов
/ 13 марта 2019

Ниже приведен очень простой пример проблемы, с которой я сталкиваюсь с липким нижним колонтитулом.Когда содержимое страницы не заполняет область просмотра, нижний колонтитул обрабатывается как статически расположенный элемент.Я понимаю, что это технически предполагаемое поведение 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 Ответ

0 голосов
/ 13 марта 2019

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

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

window.onload = init;
...