Нижний колонтитул HTML, который придерживается нижней части браузера, если не нужны полосы прокрутки

Question

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

#footer {
    position: fixed;
    width: 100%;
    bottom: 0;
}

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

Есть ли способ сделать это только на CSS? Нужно ли мне взломать Javascript? Если мне нужен взлом, есть ли хорошая библиотека? Я уже использую jQuery, поэтому с удовольствием использую что-то в зависимости от этого. Мне плевать на IE8 или ниже. Я забочусь только о IE9 + и последних версиях Chrome, Firefox, Safari и Opera.

Answer 1

Я использовал описанную здесь технику: http://www.cssstickyfooter.com/

Кажется, что она отлично работает, если не считать, что вы заранее знаете высоту нижнего колонтитула ...

Answer 2

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

т.е.Если ваш html был:

<div class='header'> header </div>
<div class='content'> some content here </div>
<div class='footer'> footer </div>

, тогда с помощью css, подобного:

.content { min-height:300px; }

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

Вы также можете попробовать margin-bottom для контента, если это более симпатично