Нижний колонтитул экрана

Question

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

Заранее спасибо!

Answer 1

Вот еще один пример того, как это сделать, прекрасно работает во всех браузерах AFAIK. http://peterned.home.xs4all.nl/examples/csslayout1.html

Изменить: я не автор, просто искал себя что-то подобное некоторое время назад.

Answer 2

РЕДАКТИРОВАТЬ: Попробуйте CSS Sticky Footer: это красиво и только для CSS.

Если вы хотите экспериментировать, absolute CSS свойство position также может работать. Оформить заказ MDN документы:

#footer {
    position: absolute;
    bottom: 0;
}

Answer 3

- сделать это с помощью JavaScript

-- пример

<div class='content'>
  your page
</div>
<div class='Footer'>Footer</div>

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 var document_height = $(document).height();
 var content_height = $('.content').height();

 if (content_height < document_height) {
    $('.content').css('height', (document_height));
 }
</script>

Answer 4

На самом деле это довольно легко сделать только с помощью CSS, хотя есть некоторые незначительные ограничения. Вот демонстрация того, как это делается (просмотрите исходный код, чтобы получить код):

http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm

Вот подробное объяснение того, как это работает, если вам это нужно:

http://www.sitepoint.com/forums/showthread.php?171943-CSS-FAQ-Tips-etc-Please-read-before-posting!&p=1239966