Как прижать футер к низу страницы HTML CSS FLEX / Фрилансер по жизни /

Подписаться 315 тыс.

Просмотров 376 тыс.

50% 1

Как прижать футер к низу страницы за 60 секунд. Быстро и просто прижимаем подвал с помощью FLEX (флексов)
🤟 БЕСПЛАТНЫЙ курс по верстке сайтов (HTML, CSS, JavaScript): • БЕСПЛАТНЫЙ курс по вер...
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Курс по верстке: edu.fls.guru
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Instagram: / freelancer.lifestyle
🔴 Facebook: / freelancerlifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

Опубликовано:

29 июл 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 569

@FreelancerLifeStyle 2 года назад

Что скажете? Продолжать формат?

@jamesborn89 2 года назад

не плохо, быстро и понятно! продолжай!

@user-ek5kq2cz6d 2 года назад

Круто! Быстро, информативно и понятно. На мой взгляд, однозначно да!

@user-dv2mq8kb9k 2 года назад

Круто! Обязательно продолжай

@athillas460 2 года назад

Очень интересный формат, я такое поддерживаю!

@user-ph4sl9vx3w 2 года назад

Да! Новичкам зайдёт особенно сильно. Кратко и информативно, без лишней информации)

@user-ej5bf1hh3q 2 года назад

Да ,конечно продолжать!) Таких тонкостей куча и если это будет в одном плейлисте будет здорово

@FreelancerLifeStyle 2 года назад

Так и сделаю!

@user-yq3rz6ug7f 2 года назад

@@FreelancerLifeStyle скажите, пожалуйста, если я стану вашим потроном сейчас, смогу ли я получить макеты предыдущие?

@FreelancerLifeStyle 2 года назад

@@user-yq3rz6ug7f да, но лучше с первого числа

@MerriedFellow 2 года назад

Да, Жень, отлично. Таких важных мелочей как раз зачастую и не хватает. Запиливай плейлист!

@FreelancerLifeStyle 2 года назад

Так и сделаю

@kirillperov3843 2 года назад

Жека, всего минута, а как будто открыл глаза на мир! Так держать!

@FreelancerLifeStyle 2 года назад

Я рад!

@Turpll 2 года назад

Очень удобный формат, продолжай!

@danzeel 2 года назад

Вообще не удобно

@amir-yuldashev7199 2 года назад

Интересный и нужный формат, мне помог спасибо. С отдельным плейлистом было бы вообще замечательно.

@olgagolovko6664 2 года назад

Отличная видео-шпаргалка! Короткая и понятная. Спасибо))

@FreelancerLifeStyle 2 года назад

Пожалуйста!

@user-bl6yu2re2u 2 года назад

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

@user-oq7nj3rp8q 2 года назад

Да, продолжать, отличный формат 👍

@FreelancerLifeStyle 2 года назад

Договорились

@user-gi4me5nj4l 2 года назад

Круто продолжай! Подскажи, будет ли какой-то цикл видео по верстке и натяжке многостраничника на WP? Я думаю многим будет интересно))

@FreelancerLifeStyle 2 года назад

Конечно

@danilafipsk 2 года назад

Поддерживаю, давай видос про натяжку на WP

@user-uw8vy3pd3k 2 года назад

круто буду ждать

@Araizen-ho5jy 2 года назад

Видос по CMS думаю не помешал бы в плейлисте верстальщика

@olehpastovenskyi6441 2 года назад

Спасібки! Крутяк, продовжуй, коротенькі відоси.

@Gitaristium 2 года назад

Отличный формат! Отличная шпаргалка на минуту без лишней мишуры. Закинул в плейлист "CSS" и при необходимости быстро вспомню 👍

@jamesmay5088 2 года назад

Супер корисний контент. З нетерпінням чекаю нових shorts)))

@starrover6592 2 года назад

Формат - супер. Хотелось бы чтобы почаще выходили в таком формате. Комментарий для продвижения видео!

@daniilkolevatykh7051 2 года назад

О боже мой, спасибо огромное!!! Всё работает наконец-то! Я Вам очень благодарен, а то на разных сайтах написано и работает, но немножко не идеально выходит, аздесь вышло прям так как хотелось!

@daffe7501 2 года назад

«Живи, а работай в свободное время» Отлично сказано!!

@Lok1goD 2 года назад

Очень удобно! Наполняю свой учебный проект твоими шортами!) Пожалуйста продолжай!)

@FreelancerLifeStyle 2 года назад

Конечно!

@hoodrychs1374 2 года назад

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

@FreelancerLifeStyle 2 года назад

Ок

@sergeydjur 2 года назад

Продолжайте!! Очень классный формат. Освежить память или же в дороге посмотреть. Я вот на побережье отъехал на пару дней, а ПК не мог взять с собой, чтобы потренироваться, смотря ваши уроки. А тут бац и перед сном видео вижу небольшое. Очень круто. Спасибо за ваш труд !!

@mikhailbykov6311 2 года назад

отличный формат!! да, да!!! конечно продолжить!!!

@maksymkhomiak2543 2 года назад

Однозначно нужно продолжать! Такой лаконичный формат как нельзя лучше подходит когда ищешь решение конкретной задачи и нет времени и терпения на просмотр классического 30-60 минутного ролика.

@FreelancerLifeStyle 2 года назад

Буду продолжать

@johnconnor9787 2 года назад

Женек человечище!!!👍👍👍

@romanprokopets3693 2 года назад

это новый уровень) супер полезные фишки/лайфхаки за минуту)

@carp_fisherman 9 месяцев назад

Если у кого-то не работает используйте вместо 100% - 100vh и будет работать)

@artemwolkov8567 2 года назад

Супер формат! Как в доку сбегать)

@FreelancerLifeStyle 2 года назад

Отлично

@Vladislav1449 2 года назад

А не легче было .wrapper {min-height:100vh; display flex; flex-direction: column;} .main {margin-bottom: auto;}

@user-wf4np1ne2c 2 года назад

Неплохо) Смотри по просмотрам) Хотя с другой стороны я как-то искал эту инфу, перематывал постоянно, а тут микро ролик и всё понятно👍

@rviturnel8516 2 года назад

Спасибо, Женя! Классный, нужный формат. Продолжай!

@FreelancerLifeStyle 2 года назад

Ок!

@konstantino7016 2 года назад

3. Женя, спасибо за отличный контент!!!!

@user-ou1rh7dv7n 2 года назад

Очень полезно и быстро. Нужный формат, обязательно продолжай. Спасибо!

@dr.bakhovuddin 2 года назад

Блин, крутая рубрика. Всё так чётко видно! Однозначно Лайк и Подписка

@user-xn1du5sv5e 2 года назад

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

@FreelancerLifeStyle 2 года назад

Пожалуйста!

@user-us4xy2rx2s 2 года назад

очень! ОЧЕНЬ даже! Максимум информативности за минимум времени. Крутяк 👍

@-Forever-Young- 2 года назад

Отличный формат. Конечно продолжать)

@Iamvarlamov 10 месяцев назад

Класс! Благодарю за полезную информацию!

@veronikaholubkina7797 2 года назад

Спасибо большое) формат супер, давно искала годный ответ на этот вопрос!

@ilya2839 2 года назад

Конечно продолжать, ты лучший !

@FreelancerLifeStyle 2 года назад

Спасибо!

@Salem_Witch_ 2 года назад

Супер!) Как раз на днях вспоминала-размышляла, как же это сделать))

@FreelancerLifeStyle 2 года назад

Рад что полезно

@Nikita04111991 2 года назад

Ну шикарно же! Четко, коротко и ясно! )

@user-oo7qj5ej6r Год назад

Класне, просте відео ! Загалом усі Ваші відео круті. Полегшують життя та мотивують до роботи

@shukonfadah5725 2 года назад

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

@user-xn5rq2ii5n 2 года назад

Круто))))) быстро и понятно!!!! Пожалуйста, продолжайте!!!!!!!!!

@FreelancerLifeStyle 2 года назад

Спасибо!

@OleksandrPohribnyi 2 года назад

Это реально рабочая схема, ещё давно увидел в уроках, теперь использую

@FreelancerLifeStyle 2 года назад

Круть!

@OleksandrPohribnyi 2 года назад

@@FreelancerLifeStyle спасибо за вашу работу!)

@arheo 2 года назад

Очень полезный формат

@FreelancerLifeStyle 2 года назад

Спасибо!

@user-kt5ux3hb4d Год назад

подожди, а как убрать отступ по бокам в footer.

@user-xe4vj5tu1r 2 года назад

Подобные фокусы очено полезны, спасибо за контент!

@Terrariane34 10 месяцев назад

Ты просто лучший!!! Спасибо тебе огромное

@alehandro6507 2 года назад

отличный формат!

@user-up6bz2se1t 2 года назад

Классный формат!, продолжай также! очень клево! лайк

@dmitry9463 2 года назад

Однозначно продолжай в таком же формате. Хотелось бы увидеть такой же ролик про то как сделать стики хеадер или боковое слайд меню.

@cheesecheesson9842 2 года назад

отличный формат, спасибо )

@khanina2011 8 месяцев назад

Супер, спасибо!!! Если бы вы ещё немножко объяснили, пожалуйста, почему так, было бы вообще огонь❤

@i.am.rossalex 2 года назад

Формат отличный! 1 фича = 1 мини-видосик!

@FreelancerLifeStyle 2 года назад

Спасибо!

@iventeye 2 года назад

Я думаю для новичков будет полезно. Быстро, чётко, понятно.

@FreelancerLifeStyle 2 года назад

Я тоже!

@user-hn1xh2vg2s 2 года назад

Хороший формат. Нравится!

@mikhailbykov6311 2 года назад

обязательно продолжать!!!

@FreelancerLifeStyle 2 года назад

Понял

@user-to9fg8uw7g 10 месяцев назад

Конечно продолжай, годный контент и охват хороший

@user-zx7dq5zl3h 2 года назад

офигенный формат!!!!!!!

@movieclips4848 2 года назад

По больше бы таких фишек 👍

@user-iq5wx7qq4v 7 месяцев назад

Женя, спасибо тебе, за твой канал, за Крутой видео справочник!!!🙏🤩

@my_coolheart 2 года назад

Топчик, кратко и на флексах (ново).

@chillchill5254 2 года назад

Если кто словил баг, при котором контент, внутри .main не хочет принимать высоту 100% , надо прописать .main не flex: 1 1 auto; а flex: 1 1 0; Надеюсь кому то помог.

@aleksejtsind3978 2 года назад

Спасибо! Продолжай, конечно!

@FreelancerLifeStyle 2 года назад

Пожалуйста!

@user-jt7wb3zc1m Год назад

- Як притиснути футер до низу сторінки - Web-скотчем 😂😹

@user-hd1vl8jb9e 2 года назад

Достойная тема, которая имеет право на продолжение

@daryaneznanova9964 2 года назад

А почему это нельзя сделать с position: fixed? объясните

@deniskotov 2 года назад

Хоть ты уже объяснял этот момент в плейлисте по флексбоксу, но мне кажется, что идея таких вот шортов очень хорошая. Потому что мелких нюансов в верстке очень много и большое видео не всегда для этого подходит. К примеру, я из прошлого видео по верстке сайта, которое длилось несколько часов, выделил для себя три-четыре нюанса, о которых не знал. И с одной стороны, круто, а с другой - как найти эти моменты снова, если забыл? Пролистывать 5 часов видео? А шорты - как раз клевая идея для того, чтобы многозначительные нюансы выделять отдельно. Короче, очень круто!!! Спасибо за формат и твою работу, Жека!

@FreelancerLifeStyle 2 года назад

Спасибо, буду делать

@konstantino7016 2 года назад

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

@Mazic86 2 года назад

Спасибо, очень ценная информация, правда

@info_maps_maroc 2 года назад

Конечно. Большое спасибо. Информация маленькими частями лучше заходит и остаётся в памяти.

@FreelancerLifeStyle 2 года назад

Да

@Nick-hq8of 2 года назад

у кого не работает, укажите у .wrapper min-height: 100vh; а не 100%.

@user-ke6sm2vx5o Год назад

дякую, запрацювало

@igorfeticov 2 года назад

Все: ждут уроки по JS. Жека: показывает прием, который показывал еще в уроках по флексам. Все: ну а что все равно полезно)) Жека, а если без шуток то продолжай такой формат, очень полезные шпаргалки. Но и про JS не забывай))

@user-tt4hc5yj8v 10 месяцев назад

Конечно продолжать) Такого бы контента все шоты....

@vladimirlevin6799 2 года назад

Да, классно, Евгений!

@FreelancerLifeStyle 2 года назад

Спасибо!

@user-hz4jr1gf9j 2 года назад

Здравствуйте! Огромное спасибо за ваши уроки! Подскажите пожалуйста, почему я когда пишу например textarea и нажимаю tab, у меня появляется только , но атрибуты не появляются? Это зависит от версии Sublime Text? Подскажите какая у вас версия.

@user-vq4kt2fn1q 2 года назад

Супер, конечно продолжать

@user-il9gs9mt2y 2 года назад

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

@user-ol8vt6dd4e 2 года назад

Это будет очень полезно. Особенно для начинающих.

@user-cs6tp6ee7d 2 года назад

Евгений, здравствуйте! Интересное видео, крайне информативно, относительно скудного хронометража. Позвольте вопрос, когда будкт следуйщий урок js, и много ли осталось изучать в данном языке программирования?

@user-bx3dy7fg1f Год назад

Круто!!! Так Так Так!

@ArduinoTechnology 2 года назад

Наконец-то мне в реки попадаются програмисты

@TamaraNikolaevna Год назад

Спасибо за помощь. Помогли только вы.

@oOcitizenOo 2 года назад

Спасибо за ролик!

@pitbrest 2 года назад

Как приятно когда подзабыл забить в гугл "фрилансер по жизни прижать футер, или фрилансер по жизни флексы и т.п.", спасибо Жека

@GoogleHDC 2 года назад

А разве футер не лучше поместить в ?

@User-tq2dq Год назад

Огромное Спасибо)

@LordOzzy1986 2 года назад

классный формат! у меня по каким-то причинам сработало так: body { height: 100vh; }, 100% никак не хотели работать), на разных браузерах.

@pestovavalentina1258 2 года назад

Я только в начале недели мучилась с этим. В уроке про флекс это есть. Все сделала именно так. Не работает. Оказалось cms дополнительно контейнер добавляла. Снаружи wrapper. По видео: Эта подача лучше. По крайней мере краткое повторение уже имеющихся знаний. Спасибо за информацию! Благодаря вашим урокам вдохновилась научиться хорошо верстать.

@dgonlock1893 2 года назад

Привет. Запили видос про то какими ты хостингами пользуешся и как залить свой сайт на хостинг.

@victormorozov2282 Год назад

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

@user-ez1gk5fm8q 2 года назад

Нужно больше таких видео. с Warcraft Отличное видео!))

@FreelancerLifeStyle 2 года назад

Ок)

@dontbeev1l Год назад

main { min-height: calc(100vh - 100px ) } В случае, если высота header и footer статична

@Messlionel 2 года назад

больше людей будет смотреть такие короткие видео, не всегда есть время смотреть видео по 1- 2 часа (( спасибо за контент !

@SidermanDmitry Год назад

Ох, блин, вот я тупица! Я тут один проект правлю и задача как раз это встала, у меня затуп случился, нашел кучу способов через всякие скрипты, пересчет высот и тп. Все это или громоздкое или корявое. И тут смотрю это видео и бью себя по лбу. Я же б.. Сам так делал на каком-то из ранних проектов! Жека, спасибо огромное! Ты лучший! Все гениальное просто!

@olehpastovenskyi6441 2 года назад

дякую Жека дуже корисну ідею ти використовуєш.

@gerkonum 2 года назад

Привет, уже неделю усердно учусь по твоим роликам, спасибо. В одном из твоих интервью узнал, что ты бывал в моём городе Черновцы) Как тебе он?

@DevNickKg 2 года назад

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