Footer к низу страницы

TMGLUK · May 29, 2011

Добрый день. Не могу справиться с задачей позиционирования футера к низу экрана при недостаточном количестве контента. Использую HTML5.


<html>
<body>
<header />
<div.content />
<aside />
<footer />
</body>
</html>

http://григорий-аникин.рф/test/e-dotu/

http://григорий-аникин.рф/test/e-dotu/styles.css

Вот это в Firefox работает, но в остальных браузерах нет:


<html style="position:relative;min-height:100%;">
<body>
<header />
<div.content />
<aside />
<footer style="height:40px;position:absolute;bottom:0;"/>
</body>
</html>

Предлагаемые решения не работают:


<html style="height:100%;">
<body style="min-height:100%;position:relative;">
<header />
<div.content />
<aside />
<footer style="height:40px;clear:both;margin-top:-40px;"/>
</body>
</html>

Edited May 29, 2011 by TMGLUK

Softlink · May 29, 2011

а вы уже все попробовали из этого раздела и все равно никак не получается?

TMGLUK · May 29, 2011

Я пробовал все. Те, которые с позиционированием футера не меняют его расположение при увеличении контента (похоже что элемент html или body не увеличивается в высоту, хотя фоновый цвет работает на всю область). Те, которые без позиционирования просто не привязывают его к низу при недостаточном контенте.

Я думаю, что дело в доктайпе HTML5.

Edited May 29, 2011 by TMGLUK

buddah · May 29, 2011

Ну сколько можно, ребята?)

http://csstemplater.com/

Я думаю, что дело в доктайпе HTML5.

В html5 теперь футер не валидно прибивать к низу?)

Edited May 29, 2011 by buddah

psywalker · May 29, 2011

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

Upd: к последнему посту это не относится, там хоть генератор сам всё сделает)

Softlink · May 30, 2011

Всё что я увидел в этом топике, полная чушь и ни одного нормального решения. Я не знаю даже, кто так подвалы прижимает
Upd: к последнему посту это не относится, там хоть генератор сам всё сделает)

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

psywalker · May 30, 2011

Всё что я увидел в этом топике, полная чушь и ни одного нормального решения. Я не знаю даже, кто так подвалы прижимает
Upd: к последнему посту это не относится, там хоть генератор сам всё сделает)
дык я ссылку дал, чтобы человек понял, что он не единственный, кто сталкивался с этой проблемой и подобных тем уже выше крыши. В каждой задача по своему, но решалась. Т.е. я к тому, что поискать-то всего лишь нужно. Глядишь и совсем тему создавать не пришлось бы

Да я про тебя и не имел ввиду, я говорил про решения ТС

TMGLUK · May 30, 2011

Спасибо. Действительно что-то не то я делал. Буду пробовать по другому.

TMGLUK · May 31, 2011

Решил вот так:


<html style="height:100%;">
<body style="height:100%;">

<div class="wrapper" style="min-height:100%;">
   <header />
   <div class="content" />
   <aside />
</div> (/wrapper)

<footer style="height:40px;clear:both;margin-top:-40px;"/>

</body>
</html>

Selen · June 1, 2011

А еще, в конце основного блока (у тебя это wrapper) не мешало бы добавить пустой блок (распорку) с заданной высотой. Иначе футер, при уменьшении окна, будет наезжать на основной контент.

TMGLUK · June 1, 2011

А еще, в конце основного блока (у тебя это wrapper) не мешало бы добавить пустой блок (распорку) с заданной высотой. Иначе футер, при уменьшении окна, будет наезжать на основной контент.

У меня отступы у .content и aside заданы. С ними нормально работает. Не люблю я дополнительную разметку. Ещё от этого враппера отказаться бы, да никак....

Вот теперь работает во всех современных браузерах: http://григорий-аникин.рф/test/e-dotu/1/

Edited June 1, 2011 by TMGLUK

Sign In

Footer к низу страницы

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information