Как сделать липкий нижний колонтитул

Question

Как сделать липкий нижний колонтитул, который я пробовал в google, нашел некоторые результаты, но не понял, как именно это работает, поэтому я сделал несколько грубых макетов, чтобы понять, что у меня есть три div's #header, #контейнер, #footer.

Так что, если я удалю #container, то нижний колонтитул не должен никуда идти, что должно быть стабильным на его постоянном месте.

объяснить простой способ все будет легко понять ...

увидеть мою скрипку: - http://jsfiddle.net/dZDUR/5/

Answer 1

Дают высота: 100% к html, body & main container. Когда вы дадите height:100% на номер .container, нажмите кнопку footer & после этого мы дадим footermargin с верхней точки, такой же, как у его height. Как это:

html,body{ 
    height:100%; 
} 
.header { 
background:red; 
width:500px; 
height:100px; 
} 

.container { 
background:yellow; 
width:500px; 
height:100%; 
} 

.footer { 
background:green; 
width:500px; 
height:100px; 
    margin-top:-100px; 
} 

HTML

<div class="container"> 
    <div class="header"> 
</div> 
</div> 

<div class="footer"> 
</div> 

Проверить это http://jsfiddle.net/dZDUR/8/

Answer 2

http://jsfiddle.net/dZDUR/6/ дают FOOTER значение position: fixed и вы можете положение, как вы хотите. в этом примере с вершиной: 200px; поэтому он останется там даже без #контейнера

Answer 3

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

<div class="header"></div> 
<div class="container"></div> 
<div class="footer"></div> 

Колонтитул ДИВ должен быть абсолютными позиционированным (вынимая его из потока), с нижним набором 0 - например:

body { 
    position:relative; 
} 

.footer { 
    position: absolute; /* or position:fixed for scrolling */ 
    bottom: 0; 
} 

вы можете или, возможно, не нужно устанавливать позицию: относительная по телу (это поведение по умолчанию?).

Если дрейфуют в картине, как упоминает QQping, используйте позицию: фиксированную вместо позиции: абсолютный (иначе же код)

Answer 4

Я думаю, что это поможет.

http://jsfiddle.net/4VEqh/

Даже если вы удалите контейнер DIV, сноска не будет двигаться.