Прижать футер к низу сайта (flex, grid).
HTML-код
- Опубликовано: 12 июн 2020
- Типичные задачи верстки. В этом видео разберем два способа как прижать футер сайта к низу страницы. Первый способ используя flex, второй способ используя grid.
Ссылки
----------------------------------------------------
Материалы урока: files.brainscloud.ru/file/pri...
О проекте
----------------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #версткасайта #html #css
А как вы прижимаете футер к низу сайта?
можно еще так :
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1 1 auto;
}
Вот у меня голова сейчас болит, между футером и хедером несколько блоков и у всех разный высокий z-index, и не знаю как футер вниз прижать)
да, кстати, хороший вариант
main { flex-grow: 1 }
Я прижимаю так же через flex только прописываю контентному div
flex 1 1 auto;
Уважаемый автор канала, у вас приятный голос и грамотная речь. Приятно смотреть и слушать. спасибо за контент
Дмитрий, я не знаю, как так выходит, но вот такие простые, рабочие задачи, которые для новичков - ужас и страх, никто не разбирает!
Огромное тебе спасибО!
Учу верстку. Вчера вечером только подумала об этом, а утром в RUclips наткнулась на это видео в рекомендациях и посмотрев, разобралась. Супер. Спасибо автору.
А ведь действительно, даже не задумывался о такой проблеме. Спасибо)
Я искал долго и нашёл! Много воды в интернете, а здесь сразу и легко! Спасибо Вам👌🤝
Божественное объяснение! Спасибо Вам большое!
Спокойная и лаконичная подача материала. Отлично
Спасибо. Коротко! Просто! И понятно!
Класс! Спасибо большое, уважаемый автор! Очень помогли!
Огромное спасибо Вам! Очень лаконично и понятно!
Столько думал как, надо было просто зайти к вам. Оказывается все легко! Спасибо большое! Очень круто!!!
Дмитрий, долго бился с этой проблемой, но только ваше видео помогло ее решить! Спасибо за видео!
Большое спасибо! Быстро решил первым способом. Класс! Успехов, процветания!
Спасибо! Самок понятное видео по этой задаче.
Спасибо! Очень полезная информация.
Спасибо Дмитрий, Было очень полезно!
Шикарно, спасибо за качественный контент
Спасибо огромное за этот урок!!!!!!
Спасибо, очень сильно помог .
СПАСИБО! очень помогло😀
Спасибо, очень полезно!
Гуд. Всего один вопрос к Диме @BrainsCloud - когда будет видео по основам JS? С твоей подачей это будет топ контент для начинающего фронтенд разработчика.
думаю будут
спасибо вам большое, сколько видео смотрел, ничего не выходило. Возможно все повлияло когда создал div PAGE . В любом случае)) только вы рассказали так, что у меня все заработало... еще раз спасибо
Мужик, счастья тебе, здоровья и долгих лет жизни!
Спасибо большое💜
Все работает! Спасибо.
Спасибо вам большое
Спасибо большое!
Спасибо, очень понятно
Сколько искал решение задачи, спасибо тебе, добрый человек. все просто понятно и доходчиво. Лайк от backeндера который полез во фронт...😁
полезных) спасибо)
Спасибо! Извечная проблема, это правда. Сразу на сайт новый поставил - работает! Протестируем на разных устройствах...
Спасибо большое, очень помогли
Огромное спасибо!
Спасибо!
спасибо Автору!
СПАСИБО!
Спасибо, смог footer прижать к низу страницы! все четко и понятно) Но есть одна вещь(для тех кто не знает будет непонятно), когда мы задаем grid-template-areas и даем названия нужно обязательно соответствующим блокам дать название при помощи grid-area [Например: .header{ template-area: header} ] . Без этого не получится ничего, если я не ошибаюсь.
Было бы здорово увидеть на этом канале видео по верстке адаптивного меню (можно пару вариантов: flex, float, списки с ссылками, только ссылки).
Контент годный.
Переподписался (почему отписался раньше - не посню, возможно, случайно).
Это было круто!
Thanks. It's so good!
Прижал, спасибо!
спасибо, топ контент
Отлично!
спасибо помогло !
Спасибо, помогло )
респект, метод с гридами класс, сделал так на проекте) в twig в базовом шаблоне тоже норм работает
ты просто лучший
Спасибо
полезно и интересно
Топ информация
Спасибо чувааак
Жаль что только один лайк можно поставить!
Спасибо за видео, мою задачу помогло решить)) 👍 Но столкнулась с «багом» в браузерах Chrome, который не позволяет мне держать этот footer внизу страницы. В других браузерах всё отлично держится. Пойду теперь решать эту задачку...
лучший
Подскажите пожалуйста, а как растянуть блок на всю высоту?
Пойдет )
Эх Димой Димой, где же ты был раньше когда ночами практиковался, и куча нервов было испаганил, когда не мог прижать футер внизу страницы ещё на флоатах это был полный кошмар.. Спасибо лайк) годный как всегда у тебя контент!
Programmers я думаю тогда эти способы и не работали
Дима, в больших проектах тоже все вкладываешь в page? Это у тебя как правило? Или исключение?. Спасибо
зависит от проекта, но обычно да
То чувство, когда только узнал об этой проблеме и тутже её решил 😂👌👌
что за горячую клавишу ты нажал когда вы lorem писали ?
фуф спасибо тебе большое.
Помогите пожалуйста, когда пишу обычные текста в внутри main то все нормально, но при вставке таблицы мой футур уходит вверх, либо перекрывает таблицу.
прив, у меня вопрос, а как зделать так чтобы например был тег a и при нажатии меня телепортировало к какойто части страницы?
если уменьшаю колёсиком размер футер идет вниз так и должно быть?
А как сделать, чтобы он всегда был внизу сайта, всегда показывался, как и хэдер?
Прошу, помогите, второй день мучаюсь, у меня .page равно одному экрану, но я добавил .content >> .grid , а .page не увеличился... из-за чего футер прижат к нему, а не к низу страниц, где кончаются все айтемы в сетке..
А почему вместо создания обертки Page, нельзя просто написать для body : overflow hidden?
Можно, но проще записать это в .wrapper
скрол пропадет)
Мощь! Только как это всё будет в Мазиле работать?
должно работать так же
а в Сафари?
А где твой мак бук?
В случае грида нужно было убрать .footer{margin-top: auto;}
А почему вы используете Brackets, когда есть Visual Studio Code с поддержкой over 100500 extensions. Просто привыкли к этому редактору или неприязнь к Майкрософту?)
@@stasalsakhanov435 так WebStorm платный, я сейчас как раз на нем и работаю по студенческой подписке.
Дима под простые проекты использует Брекетс, а под сложные - VS Code.
Верстаю обычно в брекетсе - мне для верстки хватает. VS code тоже есть и юзаю, когда идет работа с CMS и тд.
А можно flex: 1 0 100%;?
У меня почему что текст в футер уходит я не могу даже его увидить
сделай видос как анимированный фон сделать на весь сайт
зачем?
но вообще div position fixed, background cover, z-index заведомо низкий (например -1). а внутрь div ставь что хочешь, но лучше svg (потому что за 6MBps видео твой сайт добавят в спамлист).
Не получается !
height:100vh на мобильниках криво работает.
Это конечно круто, но для чего?)))))
Снимайте более качественный контент)))))))))
А то видео по типу "Как создать файл index.php" не очень))))))))
Как создать файл index.php - ruclips.net/video/8va_Dqjvg0Y/видео.html
а так что можно было?
!!! Спасибо тебе , за твои 100vh вместо моих 100 % для свойства min-height: !!! А что такое за величина VH ???
СПАСИБО!
Спасибо большое!
Спасибо!
Спасибо!