Прижатый к низу футер (пусть даже фиксированной высоты)

[Evkaky]

Тема избитая, но что-то никак не получается.

Как я рассуждаю:

1) самый Ъ способ прижать футер к низу - это сделать его абсолютно спозиционированным относительно body и прописать ему bottom: 0 (это если не вдаваться в детали). А для этого нужно что бы html и body, при малом колве контента были распахнуты на весь экран, а при большом - тянулись.
 

2) высота html, как и любого блочного элемента рассчитывается по контенту. Если контента мало, то нужно распахнуть высоту html по высоте области просмотра (viewport, на весь экран, короче), но так, что бы когда контента станет больше, высота html начала тянуться по контенту. Это очень просто:

html {   min-height: 100%;}

3) Тоже самое нужно сделать и с body. Нужно что бы он точь-в-точь повторял высоту html. И тут начинается кошмар.

Известно, что высота в % будет работать только если у элемента-родителя задана фиксированная высота (исключение - если дочерний элемент с position: absolute, то тогда для него будет работать высота в %, даже если у родителя не задана фиксированная высота), а min-height не считается фиксированной высотой. Следовательно min-height: 100% на теге body не будет иметь абсолютно никакого эффекта.

И всё, тупик, безысходность.
Что же делать?
http://jsfiddle.net/8PsDx/
Точнее, вот:
http://jsfiddle.net/75upz/1/

Edited December 18, 2013 by Evkaky

[sigma77]

http://jsfiddle.net/8PsDx/1/

[Evkaky]

Совсем не то.
Сделайте малое кол-во контента. Оставтье только 2 строчки:

text<br>

END

и посмотрите, что будет.
http://jsfiddle.net/37KH9/

Edited December 18, 2013 by Evkaky

[Great Rash]

Ну так - http://jsfiddle.net/37KH9/1/. В чем проблема?

[Vin]

А что не так? Просто фон в примере применён к section, а не к body.

Great Rush опередил.

Edited December 18, 2013 by Vin

[Evkaky]

Ну так - http://jsfiddle.net/37KH9/1/. В чем проблема?

Делаем много контента и смотрим что получается:

http://jsfiddle.net/KVtt7/ 

А что не так? Просто фон в примере применён к section, а не к body.

Если там сделать мало контента начинаются бока. 

[Great Rash]

Вам короче нужен не просто прижатый футер. Вам нужно эмулировать таблицу.

http://jsfiddle.net/KVtt7/1/

[Evkaky]

http://jsfiddle.net/KVtt7/1/

Опа, это как?

Вы решили проблему, навесив точно такой же фон и на html. Одиннаковый фон на body и на html.

И оно работает. Но я не понимаю, почему оно вдруг заработало от этого.

Магия какая-то

[Evkaky]

Кароче, мой рецепт универсальной верстки для прижатого футера (только для фиксированной высоты футера) (все вышеприведенные примеры плохи, за исключением последнего http://jsfiddle.net/KVtt7/1/, но его автор не хочет рассказывать, почему оно так заработало).

Итак, самое главное, это не вешать фон ни на html, ни на body.

html,body {   height: 100%;}/* не задавать тут ширину сайта! */#bg-wrap {   position: relative;   min-height: 100%;   margin: auto;   background: radial-gradient(#fff, blue) no-repeat;}.site-content {   padding-bottom: 100px    /* высота футера */}.main-foot {   width: 100%;   position: absolute;   bottom: 0;   height: 100px;   background: yellow;}

<div id="bg-wrap">    <div class="site-content">        content<br>        content<br>        END    </div>    <footer class="main-foot">FOOTER</footer></div>

http://jsfiddle.net/yznV5/

[Great Rash]

за исключением последнего http://jsfiddle.net/KVtt7/1/, но его автор не хочет рассказывать, почему оно так заработало).

Да вы просто шов там не видите из-за градиента Нет никакой магии.

 

Итак, самое главное, это не вешать фон ни на html, ни на body.

Хорошо, когда до правильных вещей люди доходят самостоятельно