Вопрос по html, css – CSS для фиксированного нижнего колонтитула

11

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


  
  

  
    Body text goes here.
  

  
    Copyright information
  

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

Спасибо

просто чтобы пример был сфокусирован :) user687554

Ваш Ответ

4   ответа
7

position: absolute нижнего колонтитулаposition: fixed

http://jsfiddle.net/SUQuX/

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

4
использованиеposition: fixed вместо .position: absolute

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

0

потому что думаю, что он может помочь кому-то в будущем. Я столкнулся с проблемой даже после определения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");

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

18

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




  <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>

Похожие вопросы