Как опустить футер вниз css
Перейти к содержимому

Как опустить футер вниз css

  • автор:

CSS → Прижать футер к низу страницы (sticky footer)

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

Принципиально этот косяк ничего не меняет конечно, т.к. страниц без контента на нормальных сайтах почти не встречается.
Но в карму оперы все равно, хоть и маленький, но минус.

height: auto !important;
height: 100%; дубль , переопределение правил.

это хак, а не дубль

и где про этот хак почитать? срабатывать должно последнее свойство.

IE засрал пример во всех своих версиях (если изменять размеры по вертикали — футер не двигается)

проверил в IE9, всё нормально

Антон Кондратов, чт 21/04/2011 — 22:09 #

По мне лучше так:

html, body height: 100%;
margin: 0;
padding: 0;
>
.wrapper margin: 0 0 100px 0;
>
.footer-push, .footer height: 100px;
position: absolute;
bottom: 0;
>

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

какой тогда метод хорош с аккордеоном?

Извините за возможный глупый вопрос. Я не ставил не в body не в wrapper отступов, а поставил для хедера, который вложен (как было сказано). Но все поломалось таки. Я решил проблему созданием еще одного класса над хедером, который служит отступом. Есть варианты проще?

Костик Корепин

Добрый день! Подскажите, пожалуйста, как прижать футер к низу в теме at_subtheme — подтеме Adaptive Theme. В настройках темы не нашел как это сделать, с помощью правки CSS тоже не смог. Сделал как у Вас написано.

html < font-size: 100%; -webkit-text-size-adjust: 100%; line-height: 1.5; height: 100%; overflow-y: scroll; >body < min-height: 100%; height: 100%; height: auto !important; margin: 0 !important; padding: 0 !important; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility\9; /* Only IE, can mess with Android */ >

По файрбагу глядел по высоте занимают весь экран. Нормально значит. Далее wrapper там нет, зато есть блок с , по сути тот же wrapper. Ему значит ставлю

#page

Но блок page уже не тянется по всей длине экрана, подскажите, пожалуйста как растянуть, чтобы футер прижать.

Всё хорошо, кроме того, что высота футера задана жёстко 😉

создать прибитый резиновый футер средствами css сложновато. flexbox поможет, но он пока мало где поддерживается

Rashaverak

Спасибо за рецепт! Работает 🙂

Igor Webpages

Здравствуйте, уважаемый xandeadx.
Спасибо за полезные статьи на вашем сайте и за ценные комментарии на форуме drupal.ru
Хочу попросить вас попробовать разобраться и предложить решение проблемы, связанной непосредственно с темой данной статьи и приведенного вами способа фиксировать подвал к нижней границе окна браузера.
Проблема наблюдается при использовании плагина fancybox, а проявляется в скачке/прокрутке страницы в самый верх при вызове метода fancybox (клике на ссылку с классом fancybox).
Конфликтной точкой является стиль css: html, body который используется в данном способе.
Способ, описанный в статье, я считаю самым лучшим, давно его использую и не очень хочу переходить на другие, к примеру с применением 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;

сработает только тогда, когда будет задана конкретная высота, допустим:

footer position: relative;
bottom: 0;
>

В этом случае футер упадет вниз, но «body» чаще всего делают резиновым, а не фиксированным.

Есть вариант делать так:

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; /*говорит о том, что данный блок займет все свободное пространство*/
>

в этом случае футер тоже будет внизу.

Как прижать футер к низу страницы?

Как прижать футер к низу страницы?

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

Навигация по статье:

  • Способ 1. При помощи CSS-свойства min-height
  • Способ 2. Абсолютное позиционирование
  • Способ 3. Упрощённый
  • Способ 4. Табличный

Если вы верстаете страницу с нуля или берёте уже готовый шаблон, то в большинстве случаев если на странице мало контента, то вы видите такую картину:

футер не прижимается к низу

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

Для того чтобы прижать футер сайта к низу страницы существует несколько способов.

Способ 1. При помощи CSS-свойства min-height

Данный способ является не очень красивым с точки зрения написания кода, но он очень простой, быстрый и довольно эффективный.

Заключается он в том, что нам нужно вычислить класс или идентификатор блока с контентом, а затем задать для него минимальную высоту в единицах vh

Помимо пикселей em и процентов мы так же можем использовать vh – это условные единицы высоты экрана устройства (в чём то схожие с процентами но проще в использовании)

Выглядеть это будет так:

min-height : 75vh ;

Вместо .content будет название вашего класса или идентификатора,

Вместо 75vh вам нужно будет поставить своё значение, которое наилучшим образом подойдёт для вашей страницы.

Высота всего экрана равна 100vh.

Если вы не знаете как вычислить класс или идетификотор элементов, то вам поможет эта статья с видеоинструкцией

Вы наверное подумали: «А почему бы не использовать задание высоты в обычных процентах?»

Можно и так, но высота в процентах для определённого блока сработает только тогда, когда задана высота в процентах для всех родительских элементов этого блока, включая body и html

Это значительно увеличивает объём дописываемого кода и затрачиваемое время.

Способ 2. Абсолютное позиционирование

прижать футер к низу страницы

Это классический способ прижать футер сайта к низу страницы. Заключается он в том, что вам нужно задать для блока с контентом и его родительских блоков минимальную высоту 100%, а затем для футера сайта задать отрицательный отступ сверху, который равен высоте футера. Получится, что он будет как бы налазить поверх блока с контентом.

В то же время текст блока с контентом будет закрываться футером, поэтому для него нужно будет задать нижний внутренний отступ

Если у Вас вёрстка с примерно следующей структурой:

Шапка сайта
Блок с контентом
Подвал сайта

То CSS свойства нужны следующие:

height : 100% ;
position : relative ;
min-height : 100% ;
padding-bottom : 150px ; /*нижний внутренний отступ, равный высоте футера*/
width : 100% ;
position : absolute ;
height : 150px ; /* Высота футера */

Этот способ хорошо подойдёт если вы верстаете страницу с нуля и у вас в подвале одна или 2 строки. Если же вы правите готовый шаблон с уже имеющейся вёрсткой и подвал футер сайта состоит из нескольких колонок и сайт адаптивный, то данный способ прижатия футера будет не очень удобен так как вам будет тяжело угадать высоту подвала так чтобы он нормально выглядел на разных экранах.

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

Способ 3. Упрощённый

Смысл у данного способа такой же, как и у предыдущего, но мы задаём для футера абсолютное позиционирование не относительно родительского блока, а относительно всего тела страницы.

Чтобы прижать наш футер к низу страницы пишем следующие свойства CSS

position : relative ;
height : 100% ;
width : 100% ;
position : absolute ;

Так же если контент будет залазить под футер, то для него нужно будет задать нижний padding, например, так:

padding-bottom : 200px ; /*нижний внутренний отступ, который приблизительно равен высоте футера*/

Способ 4. Табличный

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

height : 100% ;
height : 100% ;
width : 100% ; /*нужно не всегда, дописываем при необходимости*/
display : table ;
height : 100% ;
display : table-row ;

Смысл способа заключается в том, что основной блок #main, после получения CSS свойства display: table; начинает вести себя как таблица, а блок .content после получения свойства display: table-row; ведёт себя как строка таблицы и лучше подстраивается под высоту экрана.

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

Прижать футер к низу страницы

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

Это, пожалуй, все основные способы прижатия футера к низу страницы. Есть так же и другие, но они либо малоэффективны и поддерживаются не всеми браузерами, либо основываются на вышеперечисленных с незначительными доработками.

Если у вас есть свои способы как прижать футер к низу, то обязательно делитесь ими в комментариях.

Делитесь этой статьёй в соцсетях, подписывайте на обновления блога и канал YouTube, на котором вы найдёте видеоинструкции по решению различных задач в сфере веб-разработки.

Желаю вам успехов в решении данной проблемы и до встречи в следующих статьях!

С уважением Юлия Гусарь

Прижать блок в низу CSS — как прижать блок к низу

Прижать блок к низу CSS

В чем проблема: футер (нижняя часть сайта) по умолчанию становится сразу за основным контентом и не прижимается к низу страницы.

Как должно выглядеть после решения проблемы: прижать футер к низу страницы, если контента не хватает.

На изображении ниже слева отображена страница на которой нижняя часть идет сразу за контентом (проблема), а справа страница с решенной проблемой, где нижний блок всегда прижат к низу.

Прижатый и неприжатый футер к низу

На данной странице Вы можете посмотреть страницу, которая создана именно таким образом:

Посмотреть примерСкачать

Если Вы хотите научиться создавать продающие страницы с нуля, а не только подписные, тогда рекомендую свой мини-курс: «Лендинг за 60 минут».

Как прижать блок к низу?

1 HTML структура

Рассмотрим всё на простой структуре из 3-х блоков:

1 2 3 4 5 6 7 8 9 10 11
div id="container"> div id="header"> /div> div id="body"> /div> div id="footer"> /div> /div>

Один общий блок, в котором находятся три видимых блока.

2 Стили CSS

CSS Часть

Здесь также всё довольно просто:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
html, body { height:100%; } #container { min-height:100%; position:relative; } /*Стили для блока с шапкой*/ #header { background:#222; padding:10px; } /*Стили для центральной части*/ #body { padding-bottom:70px; /* Высота блока "footer" */ } /*Стили для нижней части*/ #footer { position:absolute; bottom:0; width:100%; height:70px; /* Высота блока "footer" */ background:#66ccff; }

Здесь хочу отметить строки с комментариями, которые находятся за свойствами. Это внутренний отступ снизу у центральной части и это же число у высоты нижней части (футера). В этом и есть весь секрет.

Вывод

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

Если не получается прижать блок к низу: Вы можете обратиться ко мне за помощью, предварительно записавшись на SKYPE консультацию!

CSS прижать footer к низу окна браузера

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

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

Если с помощью таблиц данная задача решается лишь указанием высоты для таблицы и/или вложенной в нее ячейки, то при использовании CSS блочной верстке применяется совсем иной подход.

В процессе практики выделили 5 способов прижимания футера к низу окна браузера с помощью CSS.

HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):

В CSS-код, приведенный ниже, включены только те свойства, которые минимально необходимы для реализации соответствующего способа. По каждому из них вы можете посмотреть живой пример.

Первый способ

Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков (html, body и .wrapper) на 100%. При этом контентному блоку .content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.

 * < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < position: relative; min-height: 100%; >.content < padding-bottom: 90px; >.footer

Второй способ

Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.

 * < margin: 0; padding: 0; >html, body, .wrapper < height: 100%; >.content < box-sizing: border-box; min-height: 100%; padding-bottom: 90px; >.footer

Благодаря свойству box-sizing: border-box, мы не позволяем блоку с классом .content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

Третий способ

Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.

 * < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: table; height: 100%; >.content

Здесь мы эмулируем поведение таблицы, превратив блок .wrapper в таблицу, а блок .content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку .content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.

В результате footer прижат к низу.

Четвертый способ

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.

 * < margin: 0; padding: 0; >.content

>100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Узнать, какие браузеры поддерживают calc() и vh, вы можете на сайте caniuse.com по следующим ссылкам: поддержка функции calc(), поддержка единицы измерения vh.

Пятый способ (самый актуальный)

Это лучший способ из всех представленных, однако работает он только в современных браузерах, котортые поддерживают CSS свойство flex. Как и в третьем способе, высота футера значения не имеет.

 * < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: flex; flex-direction: column; height: 100%; >.content < flex: 1 0 auto; >.footer

Узнать про поддержку браузерами свойства flex можно здесь.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *