Способ прижатия футера с помощью flexbox.
Разметка:
<body>
<div class="header">Шапка</div>
<div class="main">Контент</div>
<div class="footer">Подвал</div>
</body>CSS:
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0;
}
.main {
flex-grow: 1;
}
Комментарии
В опере к сожалению присутствует маленький, но неприятный косячок.
Если ресайзить окно в высоту в сторону увеличения не за уголок, а за нижнюю или верхнюю кромку, то футер не будет прилипать к нижней части, а останется висеть где и был, буд-то окно вовсе не ресайзят.
Принципиально этот косяк ничего не меняет конечно, т.к. страниц без контента на нормальных сайтах почти не встречается.
Но в карму оперы все равно, хоть и маленький, но минус.
height: auto !important;
height: 100%; дубль , переопределение правил.
это хак, а не дубль
и где про этот хак почитать? срабатывать должно последнее свойство.
http://www.dustindiaz.com/min-height-fast-hack/
IE засрал пример во всех своих версиях (если изменять размеры по вертикали - футер не двигается)
проверил в IE9, всё нормально
http://www.cssstickyfooter.com/using-sticky-footer-code.html похожее решение
твой метод не всегда хорош, если использовать меню типа аккордеон на jQuery, то меню растягивается, а футер так и остается на месте.
Метод, который опубликован тут самый эффективный из тех, которых полно в интернете, поверь мне!!!!!
какой тогда метод хорош с аккордеоном?
Извините за возможный глупый вопрос. Я не ставил не в body не в wrapper отступов, а поставил для хедера, который вложен (как было сказано). Но все поломалось таки. Я решил проблему созданием еще одного класса над хедером, который служит отступом. Есть варианты проще?
Добрый день! Подскажите, пожалуйста, как прижать футер к низу в теме at_subtheme - подтеме Adaptive Theme. В настройках темы не нашел как это сделать, с помощью правки CSS тоже не смог. Сделал как у Вас написано.
По файрбагу глядел по высоте занимают весь экран. Нормально значит. Далее wrapper там нет, зато есть блок с id="page", по сути тот же wrapper. Ему значит ставлю
Но блок page уже не тянется по всей длине экрана, подскажите, пожалуйста как растянуть, чтобы футер прижать.
Всё хорошо, кроме того, что высота футера задана жёстко ;)
создать прибитый резиновый футер средствами css сложновато. flexbox поможет, но он пока мало где поддерживается
Спасибо за рецепт! Работает :)
Здравствуйте, уважаемый xandeadx.
Спасибо за полезные статьи на вашем сайте и за ценные комментарии на форуме drupal.ru
Хочу попросить вас попробовать разобраться и предложить решение проблемы, связанной непосредственно с темой данной статьи и приведенного вами способа фиксировать подвал к нижней границе окна браузера.
Проблема наблюдается при использовании плагина fancybox, а проявляется в скачке/прокрутке страницы в самый верх при вызове метода fancybox (клике на ссылку с классом fancybox).
Конфликтной точкой является стиль css: html, body {height: 100%;} который используется в данном способе.
Способ, описанный в статье, я считаю самым лучшим, давно его использую и не очень хочу переходить на другие, к примеру с применением position.
С уважением, Igor Webpages.
не сталкивался с такой проблемой
При в ИЕ 8 при ресайзе за нижнюю границу подвал залипает на месте.
При [!DOCTYPE html] в ИЕ 8 при ресайзе за нижнюю границу подвал залипает на месте.
IE8 не поддерживает HTML5. Пишите DOCTYPE от XHML и т.п.
P.S. И не используйте этот чертов IE. Все в Chrome!
Здравствуйте! Помогите пожалуйста, есть сайт http://draftmann.com, не могу прижать футер, пришлось задать для контента min-height:800px; но это не привильно, для тегов html, body, ставлю height:100%, но когда ставлю для обертки yt_wrapper - height:100% все работает, но только на тех страницах где контент не превышает размер экрана, а все что выходит за пределы экрана обрезается, полоса прокрутки пропадает. Спасибо.
подскажите, пожалуйста, почему если задаю у body min-width: 1250px; на устройствах где высота больше ширины, все летит в тартарары? height: 100% перестает работать, футер повисает где-то в воздухе, под ним разные артефакты
Прошу прощения за, возможно, глупый вопрос, я только начинающий, но почему нельзя просто задать футеру position:relative;bottom:0; ? Разве проблема не становится решенной?
попробуйте
position: relative;
bottom: 0;
сработает только тогда, когда будет задана конкретная высота, допустим:
body {
height: 900px;
}
section {
height: 90%;
}
footer {
position: relative;
bottom: 0;
}
В этом случае футер упадет вниз, но "body" чаще всего делают резиновым, а не фиксированным.
Есть вариант делать так:
body {
height: 100%;
}
section {
height: inherit;
}
footer {
position: absolute;
bottom: 0;
}
или же заменить position: absolute; на position: fixed; смотря как вам нужнее. В этом случае "body" резиновый.
Есть еще хороший вариант, это использовать flex-box. Но на данный момент там есть подводные камни.
html {
min-height: 100%;
display: flex;
flex-direction: column;
}
body {
display: flex;
flex-direction: column;
flex: auto;
}
section {
flex-grow: 1; /*говорит о том, что данный блок займет все свободное пространство*/
}
в этом случае футер тоже будет внизу.
Добавить комментарий