Положение нижнего колонтитула всегда внизу окна просмотра

Question

У меня есть нижний колонтитул, который содержит имя пользователя. Я хочу показать это всегда внизу окна просмотра. Как фиксированная нижняя панель, но только на моей боковой панели.

Я использую функцию

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;

    $('#footer').css('margin-top', (docHeight - footerTop) + 'px');

    $('#footer').removeClass('invisible');
}

это внутри:

$( function () {
    setFooterStyle();
    window.onresize = setFooterStyle;
}

Но так как я использую боковую панель, я думаю, что поле margin-top поместит нижний колонтитул в размере пиксель под боковой панелью, а не под верхней частью страницы. Так что это где-то внизу документа, и мне нужно прокрутить, чтобы увидеть.

Есть идеи, что я делаю неправильно, чтобы текст всегда оставался внизу области просмотра при изменении размера и при прокрутке?

Answer 1

Общий термин для того, что вы пытаетесь сделать, - «Липкий нижний колонтитул». Хитрость заключается в том, чтобы создать div-обертку для содержимого над нижним колонтитулом, занимающим 100% высоты области просмотра, а затем использовать отрицательные поля в нижнем колонтитуле, чтобы переместить его на ту же величину, что и высота нижнего колонтитула. Тогда нижний колонтитул всегда находится внизу области просмотра. Затем вам нужно добавить отступы внизу содержимого, чтобы он никогда не перекрывался нижним колонтитулом, теперь, когда нижний колонтитул не занимает место в обычном потоке макета.

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

https://css-tricks.com/couple-takes-sticky-footer/