Самый эффективный и совместимый способ получения закрепленного нижнего колонтитула

Question

Я пытаюсь сделать следующее в шаблоне CSS:

1. Закрепите нижний колонтитул в нижней части, когда не хватает контента для заполнения страницы
2. Растянуть фон верхнего и нижнего колонтитула по всей ширине
3. Разместите все содержимое в середине страницы

Это код, который я создал, с помощью здесь: http://tinkerbin.com/lCNs7Upq

У меня вопрос, я видел несколько способов добиться этого. Это лучшее? Кажется, стыдно также иметь пустой div, это bodge?

Answer 1

Вы можете исправить и добавить элемент в нижний колонтитул, используя CSS:

position: fixed;
bottom: 0;

Тем не менее, я пытаюсь выяснить, что именно вы пытаетесь сделать.

Ваш верхний и нижний колонтитулы должны автоматически пройти 100% по всей странице, если это div.

Ваш средний раздел может быть установлен на высоту: авто; через css и заполняет область просмотра, толкая нижний колонтитул до самого низа, но для этого вам также нужно установить тело на 100%, чтобы заставить его работать.

html, body, #content {
    height: 100%;
    min-height: 100%;
}
#header {
    height: 100px;
    width: 100%;
    background: blue;
    position: fixed;
    top: 0;
}
#content {
    height: auto;
    margin: 100px auto;
    background: green;
}
#footer {
    position: fixed;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: red;
}

Ваш HTML должен выглядеть примерно так:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

Рабочий пример: http://jsfiddle.net/s4rT3/1/

Answer 2

Это лучший пример, который я видел:

http://css-tricks.com/snippets/css/sticky-footer/