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

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


css sticky
person dukedevil294    schedule 13.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

window.onload = init;
person Noah B    schedule 13.03.2019
comment
Технически это сработает, если вы удалите минимальную высоту, указанную в теге body. Хотя я надеялся избежать решения JS и сделать его чистым CSS. - person dukedevil294; 14.03.2019