CSS для фиксированного нижнего колонтитула

У меня довольно простая HTML-страница. Код выглядит следующим образом:

<body>
  <header style="min-height: 255px;">
  </header>

  <article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
    Body text goes here.
  </article>

  <footer style="position: absolute; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Copyright information
  </footer>
</body>

Обычно мой текст тела довольно большой. Текст достаточно велик, что требуется полоса прокрутки. Похоже, что нижний колонтитул сидит поверх текста внизу. Затем, когда я прокручиваю вниз, нижний колонтитул не фиксируется. Что я делаю неправильно?

Спасибо

Ответы

Ответ 1

Вам нужно position:fixed; в нижнем колонтитуле:

<body>
  <header style="min-height: 255px;">
  </header>

  <article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
    Body text goes here.
  </article>

  <footer style="position: fixed; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Copyright information
  </footer>
</body>

Ответ 2

Измените position: absolute нижнего колонтитула на position: fixed.

http://jsfiddle.net/SUQuX/

Почему? Это объясняет, как они отличаются https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ Я думаю, что в вашем случае проблема заключается в том, что элемент absolute прикрепляется к телу, будет прокручиваться с телом.

Ответ 3

Используйте `position: fixed` вместо `position: absolute`.

<footer style="position: fixed;">

Почему? Это объясняет, как они отличаются https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ Я думаю, что в вашем случае проблема в том, что абсолютный элемент прикрепляется к телу, поэтому он будет прокручивать с телом.

Ответ 4

Я пишу этот ответ, потому что я думаю, что это может помочь кому-то в будущем. Я столкнулся с проблемой даже после определения height нижнего колонтитула и margin-bottom для тела. Проблема в том, что если у вас есть отзывчивый сайт, где высота нижнего колонтитула динамически изменяется в зависимости от размера экрана, у вас будет перекрытие содержимого. Чтобы решить эту проблему, я использовал jQuery - сохраняйте все настройки одинаковыми, за исключением margin-bottom для body и height нижнего колонтитула.

var footerHeight = $('#main_footer').outerHeight(); // get the footer height excluding margin
    $('#main_footer').css('height', footerHeight + "px");
    $('body').css('margin-bottom', footerHeight + 10 + "px");

Это всегда будет поддерживать нижний колонтитул снизу даже при изменении высоты нижнего колонтитула, и там не будет содержания по притирке.