А как вы прижимаете футер к низу? (unknown height, IE < 10)

web-monster · June 9, 2015

Доброго времени суток, уважаемые форумчане!

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

Но что делать если нужна поддержка IE < 10? На этот вопрос я также нашел два полезных линка: вариант с эмуляцией таблиц (по сути возврат к таблицам?) и вариант с вкраплением js (на такую казалось бы простую задачу?)

Ну и соответственно мой вопрос к вам: есть ли еще решения помимо этих, на мой взгляд, решений с недостатками?

Спасибо!

SelenIT · June 9, 2015

по сути возврат к таблицам?

Нет.

lexxcode · June 9, 2015

старым проверенным трюком, который знают и пользуются большинство наверное.

Это не самое лучшее решение из старых, кстати, хотя принцип, наверное, да самый популярный. Но в этом решении есть серьезные проблемы из-за того что для html и body указывается height:100%; Это приводит к серьезным проблема при установке фона.

А я делаю так http://jsfiddle.net/alexriz/WgaA6/этот вариант не портит естественную способность html и body растягиваться, что в свою очередь позволяет адекватно настраивать фон.

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title></head><body>    <header class="header"></header>    <main class="main"></main>    <footer class="footer"></footer></body></html>

html {    min-height: 100%;    position: relative;}body {    margin: 0;}.header {    background: #004A50;    width: 1000px;    margin: auto;}.main {    width: 1000px;    margin: auto;    padding-bottom: 100px;}.footer {    background: #B13119;    width: 1000px;    height: 100px;    margin: auto;    position: absolute;    left: 0;    right: 0;    bottom: 0;    box-sizing: border-box;}

Но, а вообще да нужен flexbox, если речь идет об изменяемом по высоте футере

TuTaHuKk · June 9, 2015

старым проверенным трюком, который знают и пользуются большинство наверное.

Это не самое лучшее решение из старых, кстати, хотя принцип, наверное, да самый популярный. Но в этом решении есть серьезные проблемы из-за того что для html и body указывается height:100%; Это приводит к серьезным проблема при установке фона.

А я делаю так http://jsfiddle.net/alexriz/WgaA6/этот вариант не портит естественную способность html и body растягиваться, что в свою очередь позволяет адекватно настраивать фон.
<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title></head><body>    <header class="header"></header>    <main class="main"></main>    <footer class="footer"></footer></body></html>
html {    min-height: 100%;    position: relative;}body {    margin: 0;}.header {    background: #004A50;    width: 1000px;    margin: auto;}.main {    width: 1000px;    margin: auto;    padding-bottom: 100px;}.footer {    background: #B13119;    width: 1000px;    height: 100px;    margin: auto;    position: absolute;    left: 0;    right: 0;    bottom: 0;    box-sizing: border-box;}
Но, а вообще да нужен flexbox, если речь идет об изменяемом по высоте футере

Зачем flexbox ???????????????????????????????????????

http://jsfiddle.net/WgaA6/8/

swandev · June 9, 2015

Зачем flexbox ???????????????????????????????????????

Из вашего сообщения можно сделать вывод, что использование flexbox это плохо и для этой задачи его не стоит использовать?

lexxcode · June 9, 2015

Зачем flexbox ??????????????????????????????????????? http://jsfiddle.net/WgaA6/8/

Из вашего сообщения можно сделать вывод, что использование flexbox это плохо и для этой задачи его не стоит использовать?

Из его сообщения можно только сделать вывод, что он не отдает себе отчет о чем говорит. Прям вообще не отдает отчет

http://jsfiddle.net/alexriz/WgaA6/10/<--- просто нажать на more и увидеть чем это закончится

TuTaHuKk · June 10, 2015

Зачем flexbox ??????????????????????????????????????? http://jsfiddle.net/WgaA6/8/

Из вашего сообщения можно сделать вывод, что использование flexbox это плохо и для этой задачи его не стоит использовать?

Из его сообщения можно только сделать вывод, что он не отдает себе отчет о чем говорит. Прям вообще не отдает отчет

http://jsfiddle.net/alexriz/WgaA6/10/<— просто нажать на more и увидеть чем это закончится

Не знаю кто из нас не догоняет!

http://jsfiddle.net/WgaA6/12/

Edited June 10, 2015 by TuTaHuKk

lexxcode · June 10, 2015

Не знаю кто из нас не догоняет! http://jsfiddle.net/WgaA6/12/

Теперь открой мой первый пример, посмотри как он работает и попробуй понять что происходит

http://jsfiddle.net/alexriz/WgaA6/

TuTaHuKk · June 11, 2015

Зачем говорить загадками?

Я понял одно что вы все забыли про position: fixed

swandev · June 11, 2015

TuTaHuKk · June 11, 2015

можно словами объяснить что этим вы хотели сказать?

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

lexxcode · June 11, 2015

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

Да сколько же еще аргументов тебе давать? Подумать немного сложно, проанализировать примеры? Абсолютно никаких загадок, все открыто и прозрачно. Просто нужно почитать тему и понять о чем идет речь. position:fixed; тут ну вообще не к селу не к городу. Ты не о том прижатии футера думаешь, в отличии от того о чем мы тут говорим. Я тебе два раза дал свой пример посмотреть и поклацать, чтобы ты понял как ведет себя этот прижатый футер. Вместо этого ты всех обвиняешь дураками не пытаясь разобраться в задаче и предложенных решениях.

1. Футер прижимается к низу страницы, если контент занимает меньше экрана по высоте.

2. Если контента больше, по высоте, чем экран (появляется вертикальный скролл), то футер ведет себя обычным образом, как в обычно потоке.

Решение этих двух условий лежит в моем примере, но имеет ограничение. Но как правило для решения типичных задач этого хватает.

У автора поста есть дополнительное условие:

3. Футер должен иметь возможность подстраиваться по высоте под контент.

Чтобы решить еще и это условие мое решение не подходит. Необходимо применять flexbox, или эмулировать табличную верстку.

-------------------------------------------------------------------------------------------------------------------------------------

Молодежь вообще не пытается думать (я не старый ворчун, но блин, такие люди меня накаляют )

TuTaHuKk · June 11, 2015

Согласен ! не правильно понял вопроса. Тему можно закрывать. Не будем нервничать дедулю

Sign In

А как вы прижимаете футер к низу? (unknown height, IE < 10)

Question

Link to comment

Share on other sites

12 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

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information