Как прижать подвал к низу страницы css

Прижать футер к низу окна браузера

Как прижать футер к низу сайта? Я покажу вам, на мой взгляд, лучший метод прижатия подвала сайта к низу окна браузера с помощью CSS. Использовать будем свойства Flexbox.

  • Главная
  • HTML & CSS
  • Позиционирование в CSS

Оглавление

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

Почему именно flexbox метод?

Есть несколько вариантов прижатия футера, в том числе и готовые решение в некоторых фреймворках. Испробовал почти все, я пришел к выводу что данный метод наилучший. А теперь расскажу почему:

  1. Минимум телодвижений.
  2. Минимум селекторов.
  3. Никакого четкого обозначения высоты футера.
  4. Никаких скриптов и фреймворков.
  5. Поддержка всех известных браузеров. Chrome, Mozilla FF, Yandex, Opera, Edge, IE 11. Пруфы от Билли.
  6. Никаких дополнительных блоков в доме.

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

Перейдем к реализации.

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

Теперь нужно главный контейнер сделать flex-контейнером. Далее с помощью с помощью свойства flex: 1 1 auto , нам необходимо сделать наш главный wrapper более гибким. Таким образом враппер будет иметь размер в зависимости от свойств его ширины и высоты, но будет расти, чтобы поглотить любое дополнительное свободное пространство во flex-контейнере и будет сжиматься до минимального размера, чтобы соответствовать контейнеру.

С помощью свойства flex-flow: column nowrap , определим колоночное направление главной и поперечной оси.

Ну и с помощью min-height: 100vh , растягиваем wrapper во всю высоту области просмотра. Если вы не в курсе, то vh расшифровывается как viewport height, а 1vh равен одному проценту от высоты области просмотра. Вот что в итоге имеем:

Ну и финиш. Делаем блок контета более гибким.

Заодно этим способом мы заставляем осла 11 версии прижать футер. Иначе проблема будет заключаться в том, что в IE11 flexbox не учитывает минимальную высоту, которую мы указали, поэтому flexbox сворачивается до высоты содержимого контента.

Ну и смотрим что получилось.

Благодарность автору

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

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

DIV верстка — Как прижать футер (footer, подвал) к низу экрана в нашем макете сайта

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

Макет сайта с подвалом (футером)

Кроме этого в первых статьях, посвященных верстке сайта (тут описаны ее принципы на основе полученных знаний по Html и CSS), были рассмотрены некоторые базовые понятия вебмастеринга, без понимания которых было бы довольно трудно разобраться в нюансах.

Какие проблемы возникли с нашим макетом сайта

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

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

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

Желаемое положение подвала (футера) в макете сайта

Т.е. правильное поведение футера для случая малого количества информации на странице и большого экрана пользователя будет следующим:

Плавильное расположение блоков в макете сайта

Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.

Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:

А в файле Style.css были прописаны следующие CSS свойства:

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

Наша задача прижать футер к низу экрана

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

Как прижать футер к низу макета сайта

Итак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала потребуется задать высоту всей страницы, равную ста процентам (она будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер основного блока с макетом тоже до 100%.

Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:

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

Основные свойства CSS, при желании, вы можете посмотреть в Уроках CSS. Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:

Еще я хочу его подсветить (div с ). Для этого задам ему рамку с помощью соответствующего свойства Border (тут читайте про рамки в CSS):

Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:

Футер не хочет прилипать к низу экрана в макете сайта

Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:

Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:

Подвал прижат к низу экрана

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

Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100% ), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.

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

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

Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:

А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:

Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):

Весь трехколоночный макет помещается в одном экране

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

Вставляем распорку и боремся с Internet Explorer

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

Информация в одной из колонок наезжает на футер

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

Т.е. получается, что внизу экрана расположены два блока, перекрывающие друг друга в области подвала.

Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.

Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID (тут читайте про CSS селекторы) с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:

А в Style.css пропишем для этого (ID свойство Height, задающее высоту этому контейнеру-распорке равную высоте подвала:

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

Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):

Благодаря распорке мы избегаем наездов и перекосов в нашем трехколоночном макете

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

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

Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:

С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:

Создаем отступы от футера слева и справа

Ну вот, вроде больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и, возможно, в каких-то других старых тоже) не смотря на все наши старания подвал не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.

Все это происходит из-за того, что (браузер Internet Explorer 6 не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.

Поэтому для решения этой проблемы нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для maket нужно будет вставить следующую комбинацию:

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

Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:

Ну, а окончательный вид Index.html был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.

Можете также посмотреть видео «Работа с Html тегом div»:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Комментарии и отзывы (70)

Извините, случайно не у Игоря Квентора заимствован материал? Уж очень похоже, да и не в первый раз.

bescom: нет, я не знаю его. Материал похож, наверное, по одной простой причине — это решение как прижать футер к низу макета наиболее популярное и простое и многие его описывают, в том числе и я. Да, один из скриншотов не мой, я взял его с какого-то сайта, для иллюстрации правильного расположения футера, может быть именно с сайта этого уважаемого господина. Ну, я думаю, он не сильно обидится на меня за это, просто не было под рукой подходящего примера.

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

bescom, Hiway: может ссылку кините, а то не совсем понятно, о чем идет речь.

Очень интересная статья о том, как можно прижать футер к низу. Спасибо.

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

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

В FF конструкция

Вопрос. Как сделать, чтобы «Содержимое страницы» (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?

Вопрос. Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?

Меня тоже это интересует!

Виктор говорит, что:

Вопрос. Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?

Меня тоже это интересует!

Присоединяюсь к выше сказанному,хотелось бы узнать продолжение темы!

Graff говорит, что:

Виктор говорит, что:

Вопрос. Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?

Меня тоже это интересует!

И я уже перелопатил пол интернета в поисках ответа не этот вопрос!

Дмитрий: у него украдено у него. со скринами на пару )) не хорошо красть!

Даниил: есть 1 метод но он очень дикий и есть в интернете но его просто так не найдеш

и кстати данная верстка плохая так как текст налазит 1 на другой при увеличении екрана

КОля: не говорите ерунды. Где ваши доказательства. А то собака лает, ветер носит. Не хорошо наговаривать, тем более что вы заблуждаетесь. Я все никак не могу добиться от кого-нибудь ссылки на материалы «маэстро», у которого я якобы «спер» всем известные постулаты блочные верстки. Уже и вправду стало интересно.

Дмитрий: Собственно, особо искать не нужно, по первому же запросу ссылка так и впрыгивает на экран — http://www.websovet.com/kak-prizhat-podval-k-nizu-ekrana#more-211

Скрин оттуда. Правда, Квентор делает оговорку, что он тоже не автор способа, а его реализатор.

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

bescom: да, т.е. нет. «Да», в смысле, сначала разобрался с деталями блочной верстки сам, используя ряд материалов (курс Андрея Морковина в том числе), а потом написал, так как понял и как было бы понятно другим. «Нет», в смысле, не помню приведенной выше статьи, но мог и забыть. Еще по поводу «да» — один скриншот был взят из Яндекс.Картинок. По поводу «нет» — все остальные скрины мои.

Ребят, мне честно говоря, по барабану — считать такое изложение плагиатом или нет. Меня передернуло заявление о краже материала. Такого не было, да и вряд ли, может быть в будущем, ибо это довольно не рентабельно, в плане получения не уникального текста и изображений — оно мне на фиг не надо.

Дмитрий: Заметьте — я не говорил о плагиате, только лишь о черпании вдохновения. Лично мне очень нравится, как Вы излагаете материал — подетально, четко и понятно. Да и вообще, все мы при подготовке собственного материала в той или другой степени используем чужой материал.

Автор забыл добавить очистку обтекания перед распоркой

Автор замечательно дает материал — все запоминается само собой. Но! Частенько попадаются устаревшие данные и ошибки, которые очень тяжело находить и исправлять самостоятельно. Желательно устранить несоответствие стандартов в примерах

Млин, статья не для людей, а для поисковых роботов. Читать невозможно!

bescom: конечно, полностью с вами согласен.

Роман: спасибо за дополнение.

Константин: увы, бывают и недоработки.

Alien: эта песенка стара. Почитайте мои отповеди к подомным комментариям в других статьях. Повторяться нет желания.

Даниил говорит, что:

Graff говорит, что:

Виктор говорит, что:

Вопрос. Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?

Меня тоже это интересует!

И я уже перелопатил пол интернета в поисках ответа не этот вопрос!

И я тоже перелопатил! весь день потратил.

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

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

Виталий: Вот, дожили и доверстались. что табличная верстка становится новаторством и революционным методом. 🙂 А вообще — правильно. Там, где целесообразнее делать таблицами — ими и надо делать! Тем более, что у них есть вполне определенные преимущества перед блочной версткой.

Статья хорошая.Мне пригодилась.

Думаю, что в скором времени появится куча вопросов.

Забыл автору сказать: «Спасибо!» .

Может я чего-то не понимаю, но зачем #maket задавать min-height: 100%, если можно просто поставить height:100%;, при этом даже с IE6 не надо заморачиваться?

Подскажите что нужно сделать если контента мало а левое меню растягивается(акардион).При раскрытии всего меню наезжает под footer.Кто знает напишите решение!

Здрасте всем. Решил ваш вопрос прижатия с помощью несложного javascript кода. Что самое банальное — в конце, когда код был готов — он использует только 1 CSS строку.

У меня вопрос относительно кодировки PHP файла. Просто я сразу создал файл формата PHP для Joomla, ну Index который. Вот, скопировал полностью ваш код. Заменил путь к css. Всё отобразилось. Но, если я «сохраняю как» файл в формате utf-8, с заменой самого себя, то при попытке открыть его браузером я вижу в окне код. Тут же сразу создал блокнот в формате utf-8. Всё отображается нормально. Попробовал пересохранить в 1251 (ANSI — кириллица) — всё в квадратиках. Соррир за много букв. Просто интересно, что происходит. Браузер Google Chrome.

Слишком черезчур текст под поисковики оптимизирован, читать не возможно.

Код выровненный по центру убивает

Спасибо за основательные и подробные разъяснения.

Очень помогли уроки. Все с толком, с расстановкой, на конкретном примере.

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

Предлагаю не останавливаться на этом макете, а вести уроки до создания готового сайта на основе этого макета. Подобрать цвета, сделать меню, вставить картинки. Тогда это направление будет иметь логичное завершение.

у меня проблема-при уменьшении экрана содержимое средний колонки налазит на правую.и не меняються размеры левой и правой.ет конечно так и должно быть наверно но выглядит ужасно.как исправить?(может я чтото пропустила. )

Большое, спасибо. То что нужно

Если серьезно, материалов с грамотным, поэтапным изложением очень мало в нэте, тем более, если ты только начинаешь изучение сайтостроения, поэтому отдельное спасибо автору! Пригодилось! Критиков на мыло)

С удовольствием прочитал материал!

доступно, понятно, логически продумано.

такого доходчивого подхода давно не видел, все обрывки какие-то.

Материал понравился! Всё наглядно и последовательно. Занимаюсь созданием сайтов в Joomla & WordPress, все шаблоны меняю как мне нужно, только своим сайтом не могу заняться (сапожник без сапог или бесплатно не хочется).

А не проще просто в контенте поставить падинг равный размеру футера и текст на него не наедет?

Даниил говорит, что:

Graff говорит, что:

Виктор говорит, что:

Вопрос. Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?

Меня тоже это интересует!

И я уже перелопатил пол интернета в поисках ответа не этот вопрос!

И я тоже прелопатил! весь день потратил.

Так кто-нибудь объяснит этот фокус??

Ну наконец-то простой рабочий вариант. Спасибо!

привет всем) Возможно, я покажусь предсказуемым), но

Правда хотелось бы узнать, как блоки left, right content «дотянуть» до footer?

Для смещения дивы content до подвала, я задал высоту равную высоте див left right, вот и все)))

Автор нах всех, пиши дальше, хорошо написано

А как сделать чтобы левая колонка опускалась до подвала, а то она растягивается под текст в ней (в колонке содержание большой объем текста а в левой 4 строчки и фон левой колонки не соприкасается с подвалом)

задай контейнеру блока, где лежит колонка, значение min-height:100%. +

задаешь html body = height:100%

и будет счастье. (только не для IE 6)

там надо кое что добавить)))

это я вот один непонимаю,

сначала мы даём макету 100% экрана и поднимаем подвал на размер самого подвала, а потом делаем распорку на размер опять же самого подвала чтоб текст незакрывал, но народ, в итоге подвал из-за распорки и уходит туда где он и был после увеличения макета на 100%.

Я просто подобрал 91% макету и всё, не поднимал подвал не смещал его обратно распоркой, гемором вы тут занимаетесь и всё

91% от чего взято? если окна просмотра, то что с overflow?

когда текст доходит до упора,и если уменьшить страницу и прокрутить вниз, нечего на футер не налазит?

Спасибо за статью мне пригодилось.

За статьи спасибо, есть правда несостыковка, с вашей распоркой, когда объем данных превышает 100%(двух-колоночный шаблон) и появляется прокрутка, то обе колонки(или та в которой объем данных превышает 100%) тупо упираются в футер. Выглядит не красиво, так как хотелось округлить(радиус)нижние уголки у колонок. Еще не пробовал, но мне думается в распорку надо воткнуть какую-нибудь вертикальную полоску прозрачную или под фон с размером по вертикали равной вашей распорки, прямо сегодня и попробую. Спасибо, продолжайте.

Спасибо большое! Прочитал до середины и всё получилось) Но всё равно всё до конца прочитал.

Каким образом лучше всего сделать отступ между подвалом и всем, что выше.

Отвечаю на этот вопрос(надеюсь еще актуально). «Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?»

Используйте атрибут min-height через css к div-блоку. Если текста будет больше чем указанная там высота он будет растягиваться, а если меньше то он не будет уменьшатся.

И еще автору: сделайте указание даты в комментариях и статьях на своем сайте. А то непонятно актуально или нет.

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

Спасибо за доходчивые уроки. Все получается. Вот только есть вопрос: а как можно сделать чтоб блок left, или любой другой блок всегда был между шапкой и подвалом без разрыва, независимо от того, есть ли текст или нет?

Спасибо за доходчивые уроки. Все получается. Вот только есть вопрос: а как можно сделать чтоб блок left, или любой другой блок всегда был между шапкой и подвалом без разрыва, независимо от того, есть ли текст или нет?

Выше написано как это сделать.

Отвечаю на этот вопрос(надеюсь еще актуально). «Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?»

Используйте атрибут min-height через css к div-блоку. Если текста будет больше чем указанная там высота он будет растягиваться, а если меньше то он не будет уменьшатся.

В селекторах margin и padding когда значение 0 — px писать не нужно. 0px; не пишется, пишется просто 0;

Спасибо! Уже устал с этим футером возиться, помогла статья ваша

Помогите, пожалуйста! У меня в футере WordPress иконки счётчиков налазят на строчку копирайта. Что нужно сделать, чтобы увеличить между ними интервал? Если можно как можно проще! Желательно пользуясь функционалом Wordpess. Я языков программирования не изучал, сайт только начал делать.

Сергей: ну, интервалы изменяются добавление марджин и паддинг.

Админ, спасибо большое за инфу очень помогла все понятно показано как и что делать я наконецто решил эту проблему с помошью этой инфы!))

Огромное спасибо за столь подробное изложение материала. Сколько не читала для меня все как на китайском написано 🙂 А здесь все просто и доступно. Супер. Еще раз спасибо.

Не смог не удержатся и не сказать спасибо. за вот margin:0px;

padding:0px; к html и body

Автору большой респект. Не обращай внимания на гундосов :).

Уже не используют #id для описания стилей блока.

.class-name — имена класов используются сейчас.

Если кому интересно то сюда

Автор, напиши, пожалуйста, о привязке этого всего к Joomla)

Отличная статья. перерыскал везде, только тут нашел!

зачем заглушку, можно же у основного контейнера (#maket) сделать минус нижний margin.

Как прижать футер к низу страницы с помощью CSS

Набросаем простенькую страничку, на которой будем экспериментировать:

И зададим для нее такие же простенькие стили:

Пока что это простое украшательство, мы добавили обертке штриховую рамку и раскрасили основные блоки — header, main , aside и footer, чтобы проще их различать. Текущий результат не очень впечатляет, правда?)

Базовая верстка. Футер далеко от низа страницы

Футер висит где-то высоко над землей, а мы очень хотим его к этой земле приклеить.

Постановка задачи

Если в главном блоке мало контента, футер «прилипать» к низу странички. Если контента много, футер должен следовать за ним в нормальном потоке, скрываясь за нижней границей браузера. Другими словами, футер не должен маячить в нижней части страницы как приклеенный, если контент пытается выдавить его вниз.
Рассмотрим несколько вариантов решения проблемы.

Position: absolute

Предупреждение: данный способ годится только для футеров фиксированной высоты (для блока footer определено свойство height )!

Выдернем футер из общего потока контента и спозиционируем его абсолютно, причем позиционировать будем относительно нашей обертки (page), а точнее ее левого нижнего угла. Если мы абсолютно спозиционируем футер относительно самого окна браузера, он, конечно, прилипнет к низу, а вот отлепить его обратно будет уже проблематично. Даже когда контент начнет занимать всю страницу.

Абсолютное позиционирование футера

Что произошло? Да в общем ничего, за исключением того, что ширина футера уменьшилась до ширины его содержимого, а сам он наполз на контент главного блока. Чтобы исправить это пропишем футеру 100% ширину, а блоку .content нижний паддинг (отступ).

При этом 100% будут браться от ширины блока .page , так как наш футер спозиционирован относительно него.

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

Ничего же не изменилось! — возмутитесь вы, и будете правы. Да, мы строго-настрого приказали блоку page растянуться минимум на 100% от высоты доступной ему области. Однако, мы забыли, что этот блок находится внутри тела нашего документа — тега body , а тот, в свою очередь, внутри html , которым никто не потрудился сообщить о том, что следует занять всю доступную высоту. Понаблюдать за этой связью мы можем, назначив body любую высоту, например:

Страница растягивается на 100% от body

Прогресс налицо — футер уполз вниз. Теперь просто задаем body и html 100%-ную высоту и радуемся прилипшему футеру.

Того же эффекта можно было добиться, просто установив блоку .page минимальную высоту в 100vh .

Табличная верстка

Не пугайтесь, никто не заставляет вас верстать таблицами, эта технология постепенно отходит в прошлое. Однако, сложно отрицать тот факт, что таблицы в некоторых аспектах — вещь крайне удобная. Например, в позиционировании футера. Мы можем заставить наши блоки вести себя как строки таблицы с помощью CSS-свойства display:table-row . Это весьма удобный метод, который, к тому же, не требует категорично определять высоту футера.
Блок .page станет таблицей, а блоки header , .content и footer ее рядами.

На первый взгляд ничего не изменилось. Однако теперь давайте зададим таблице и ее родительским блокам 100%-ную высоту.

Табличное отображение

Что такое произошло? Наша таблица растянулась на всю высоту экрана, но все высота блоков изменилась. Это волшебное свойство таблиц — автоматически балансировать высоту своих рядов в зависимости от содержимого. С этим очень легко разобраться. Зададим футеру и хедеру высоту в 1 пиксель. Не бойтесь, они не превратятся в узкие полоски, их реальная высота будет высчитываться в зависимости от контента. Этот способ лишь позволить блоку .content растянуться во всю высоту страницы.

Ограничение высоты шапки и футера

В принципе, никто не мешает и здесь задать конкретную высоту для футера или хедера.

See the Pen by furrycat (@furrycat) on CodePen.

Флексбоксы

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

Это флексбоксы.
С их помощью решение проблемы «липкого футера» осуществляется очень просто и очень изящно:

Использование flexbox-модели

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

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