Прижать футер к низу сайта (flex, grid).

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ก.พ. 2025

ความคิดเห็น • 102

  • @BrainsCloud
    @BrainsCloud  4 ปีที่แล้ว +17

    А как вы прижимаете футер к низу сайта?

    • @zoltek3638
      @zoltek3638 4 ปีที่แล้ว +21

      можно еще так :
      .page {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      }
      .content {
      flex: 1 1 auto;
      }

    • @jemilsuleimanov209
      @jemilsuleimanov209 4 ปีที่แล้ว +2

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

    • @BrainsCloud
      @BrainsCloud  4 ปีที่แล้ว +2

      да, кстати, хороший вариант

    • @Spider0444
      @Spider0444 4 ปีที่แล้ว

      main { flex-grow: 1 }

    • @MxM_5835
      @MxM_5835 4 ปีที่แล้ว +1

      Я прижимаю так же через flex только прописываю контентному div
      flex 1 1 auto;

  • @ЕвгенийСоболь-я4о
    @ЕвгенийСоболь-я4о 4 ปีที่แล้ว +35

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

  • @Iraes05
    @Iraes05 4 ปีที่แล้ว +19

    Дмитрий, я не знаю, как так выходит, но вот такие простые, рабочие задачи, которые для новичков - ужас и страх, никто не разбирает!
    Огромное тебе спасибО!

  • @tetianatrofymets7940
    @tetianatrofymets7940 4 ปีที่แล้ว +7

    Учу верстку. Вчера вечером только подумала об этом, а утром в TH-cam наткнулась на это видео в рекомендациях и посмотрев, разобралась. Супер. Спасибо автору.

  • @aventa90r
    @aventa90r 4 ปีที่แล้ว +3

    Я искал долго и нашёл! Много воды в интернете, а здесь сразу и легко! Спасибо Вам👌🤝

  • @DeIgado95
    @DeIgado95 4 ปีที่แล้ว +5

    А ведь действительно, даже не задумывался о такой проблеме. Спасибо)

  • @ВиталийНам-ю7н
    @ВиталийНам-ю7н 3 ปีที่แล้ว

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

  • @BmxCarSoundStreetTrial
    @BmxCarSoundStreetTrial 2 ปีที่แล้ว

    спасибо вам большое, сколько видео смотрел, ничего не выходило. Возможно все повлияло когда создал div PAGE . В любом случае)) только вы рассказали так, что у меня все заработало... еще раз спасибо

  • @mrdoom3249
    @mrdoom3249 3 ปีที่แล้ว

    Дмитрий, долго бился с этой проблемой, но только ваше видео помогло ее решить! Спасибо за видео!

  • @pastyrMisha
    @pastyrMisha 2 ปีที่แล้ว

    Большое спасибо! Быстро решил первым способом. Класс! Успехов, процветания!

  • @eugene_bilozir
    @eugene_bilozir ปีที่แล้ว

    Спасибо, смог footer прижать к низу страницы! все четко и понятно) Но есть одна вещь(для тех кто не знает будет непонятно), когда мы задаем grid-template-areas и даем названия нужно обязательно соответствующим блокам дать название при помощи grid-area [Например: .header{ template-area: header} ] . Без этого не получится ничего, если я не ошибаюсь.

  • @АлександрКаптуров-с8и
    @АлександрКаптуров-с8и 10 หลายเดือนก่อน

    Класс! Спасибо большое, уважаемый автор! Очень помогли!

  • @annatolstoukhova8561
    @annatolstoukhova8561 ปีที่แล้ว

    Спасибо! Самок понятное видео по этой задаче.

  • @vilzer100
    @vilzer100 2 ปีที่แล้ว +1

    Сколько искал решение задачи, спасибо тебе, добрый человек. все просто понятно и доходчиво. Лайк от backeндера который полез во фронт...😁

  • @DenInside
    @DenInside 2 ปีที่แล้ว

    Мужик, счастья тебе, здоровья и долгих лет жизни!

  • @gennadystolbov
    @gennadystolbov 3 ปีที่แล้ว

    Спасибо! Извечная проблема, это правда. Сразу на сайт новый поставил - работает! Протестируем на разных устройствах...

  • @daniloneil
    @daniloneil 4 ปีที่แล้ว +25

    Гуд. Всего один вопрос к Диме @BrainsCloud - когда будет видео по основам JS? С твоей подачей это будет топ контент для начинающего фронтенд разработчика.

    • @BrainsCloud
      @BrainsCloud  4 ปีที่แล้ว +6

      думаю будут

  • @tatigerbst4416
    @tatigerbst4416 2 ปีที่แล้ว

    Божественное объяснение! Спасибо Вам большое!

  • @grs204_
    @grs204_ 4 ปีที่แล้ว

    Спокойная и лаконичная подача материала. Отлично

  • @MxM_5835
    @MxM_5835 4 ปีที่แล้ว +1

    Спасибо. Коротко! Просто! И понятно!

  • @Alex-ni2uv
    @Alex-ni2uv 2 ปีที่แล้ว

    респект, метод с гридами класс, сделал так на проекте) в twig в базовом шаблоне тоже норм работает

  • @blxxd39
    @blxxd39 2 ปีที่แล้ว

    Спасибо Дмитрий, Было очень полезно!

  • @notjimbeam689
    @notjimbeam689 3 ปีที่แล้ว +1

    Спасибо, очень сильно помог .

  • @АндрейВикулов-ы8м
    @АндрейВикулов-ы8м 3 ปีที่แล้ว

    Спасибо! Очень полезная информация.

  • @BagaevRoman
    @BagaevRoman 4 ปีที่แล้ว

    Огромное спасибо Вам! Очень лаконично и понятно!

  • @vitaliikosh557
    @vitaliikosh557 2 ปีที่แล้ว

    Спасибо огромное за этот урок!!!!!!

  • @kadrrrriya
    @kadrrrriya 3 ปีที่แล้ว +1

    СПАСИБО! очень помогло😀

  • @progerlife6690
    @progerlife6690 4 ปีที่แล้ว +3

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

    • @Вячеслав-я6л3и
      @Вячеслав-я6л3и 4 ปีที่แล้ว

      Programmers я думаю тогда эти способы и не работали

  • @ВиталийВвв-ж9о
    @ВиталийВвв-ж9о 4 ปีที่แล้ว +1

    Жаль что только один лайк можно поставить!

  • @Eleanora13
    @Eleanora13 ปีที่แล้ว

    Спасибо за видео, мою задачу помогло решить)) 👍 Но столкнулась с «багом» в браузерах Chrome, который не позволяет мне держать этот footer внизу страницы. В других браузерах всё отлично держится. Пойду теперь решать эту задачку...

  • @WarriorExiles
    @WarriorExiles 3 ปีที่แล้ว

    Было бы здорово увидеть на этом канале видео по верстке адаптивного меню (можно пару вариантов: flex, float, списки с ссылками, только ссылки).
    Контент годный.
    Переподписался (почему отписался раньше - не посню, возможно, случайно).

  • @bakhytzhankhan7852
    @bakhytzhankhan7852 ปีที่แล้ว

    Спасибо большое💜

  • @difaida_a7359
    @difaida_a7359 4 ปีที่แล้ว

    Шикарно, спасибо за качественный контент

  • @kabipuppa
    @kabipuppa 2 ปีที่แล้ว

    Спасибо вам большое

  • @АтайИбрагимов-ю8л
    @АтайИбрагимов-ю8л 4 ปีที่แล้ว

    Все работает! Спасибо.

  • @technic_and_programming
    @technic_and_programming 4 ปีที่แล้ว +1

    Спасибо большое!

  • @overlord2k4
    @overlord2k4 4 ปีที่แล้ว

    То чувство, когда только узнал об этой проблеме и тутже её решил 😂👌👌

  • @Romeo-kmv
    @Romeo-kmv 4 ปีที่แล้ว

    Спасибо, очень понятно

  • @Nick-hq8of
    @Nick-hq8of 2 ปีที่แล้ว

    ты просто лучший

  • @Dan-p7f
    @Dan-p7f 3 ปีที่แล้ว

    Прижал, спасибо!

  • @ВладимирДунаев-ц2н
    @ВладимирДунаев-ц2н 4 ปีที่แล้ว

    полезных) спасибо)

  • @에덴리시버
    @에덴리시버 4 ปีที่แล้ว

    спасибо Автору!

  • @fantast2568
    @fantast2568 4 ปีที่แล้ว

    Спасибо, очень полезно!

  • @yaroslavzef7267
    @yaroslavzef7267 4 ปีที่แล้ว +1

    Это было круто!

  • @mak_whisk
    @mak_whisk 2 ปีที่แล้ว

    Спасибо

  • @RuslanchannelD
    @RuslanchannelD 4 ปีที่แล้ว

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

  • @ЛевапВономис
    @ЛевапВономис 2 ปีที่แล้ว

    Спасибо чувааак

  • @qwe-rty-
    @qwe-rty- 4 ปีที่แล้ว +1

    Топ информация

  • @ЮлияВысоцкая-н1щ
    @ЮлияВысоцкая-н1щ 4 ปีที่แล้ว

    Спасибо большое, очень помогли

  • @yurizhdanov
    @yurizhdanov 2 ปีที่แล้ว

    спасибо помогло !

  • @andreykoreshkoff3968
    @andreykoreshkoff3968 2 ปีที่แล้ว

    Спасибо, помогло )

  • @МишаМихаил-ф7х
    @МишаМихаил-ф7х 4 ปีที่แล้ว

    Thanks. It's so good!

  • @AquaEasy
    @AquaEasy 2 ปีที่แล้ว

    Подскажите пожалуйста, а как растянуть блок на всю высоту?

  • @vladmvp8140
    @vladmvp8140 4 ปีที่แล้ว +1

    спасибо, топ контент

  • @artcip5715
    @artcip5715 ปีที่แล้ว

    что за горячую клавишу ты нажал когда вы lorem писали ?

  • @vladimirsherstyuk2906
    @vladimirsherstyuk2906 4 ปีที่แล้ว

    полезно и интересно

  • @imaxkappa5026
    @imaxkappa5026 3 ปีที่แล้ว

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

  • @жорагошин
    @жорагошин 4 ปีที่แล้ว

    Спасибо!

  • @jastinmakalister637
    @jastinmakalister637 ปีที่แล้ว

    если уменьшаю колёсиком размер футер идет вниз так и должно быть?

  • @berkut4502
    @berkut4502 2 ปีที่แล้ว +1

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

  • @adamsteklov
    @adamsteklov 2 ปีที่แล้ว

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

  • @КамильМиникеев-г5ъ
    @КамильМиникеев-г5ъ 4 ปีที่แล้ว +1

    А почему вместо создания обертки Page, нельзя просто написать для body : overflow hidden?

    • @ame4087
      @ame4087 4 ปีที่แล้ว

      Можно, но проще записать это в .wrapper

    • @lvivduncan
      @lvivduncan 4 ปีที่แล้ว +1

      скрол пропадет)

  • @i-love-bitrix24
    @i-love-bitrix24 2 ปีที่แล้ว +1

    В случае грида нужно было убрать .footer{margin-top: auto;}

  • @asdasd-y2m
    @asdasd-y2m 11 หลายเดือนก่อน

    лучший

  • @Юрій-ч1о
    @Юрій-ч1о 4 ปีที่แล้ว

    Дима, в больших проектах тоже все вкладываешь в page? Это у тебя как правило? Или исключение?. Спасибо

    • @BrainsCloud
      @BrainsCloud  4 ปีที่แล้ว

      зависит от проекта, но обычно да

  • @req6841
    @req6841 3 ปีที่แล้ว

    прив, у меня вопрос, а как зделать так чтобы например был тег a и при нажатии меня телепортировало к какойто части страницы?

  • @Группа171АТФ
    @Группа171АТФ 4 ปีที่แล้ว

    фуф спасибо тебе большое.

  • @svgcode9348
    @svgcode9348 4 ปีที่แล้ว

    Мощь! Только как это всё будет в Мазиле работать?

    • @BrainsCloud
      @BrainsCloud  4 ปีที่แล้ว

      должно работать так же

    • @Sobanim
      @Sobanim 4 ปีที่แล้ว

      а в Сафари?

  • @Alex-wi1qn
    @Alex-wi1qn 4 ปีที่แล้ว +1

    А где твой мак бук?

  • @stoicizmkort
    @stoicizmkort 4 ปีที่แล้ว

    сделай видос как анимированный фон сделать на весь сайт

  • @dimitridoroshko
    @dimitridoroshko 4 ปีที่แล้ว

    А почему вы используете Brackets, когда есть Visual Studio Code с поддержкой over 100500 extensions. Просто привыкли к этому редактору или неприязнь к Майкрософту?)

    • @dimitridoroshko
      @dimitridoroshko 4 ปีที่แล้ว

      @@stasalsakhanov435 так WebStorm платный, я сейчас как раз на нем и работаю по студенческой подписке.

    • @shigabetdinov1
      @shigabetdinov1 4 ปีที่แล้ว

      Дима под простые проекты использует Брекетс, а под сложные - VS Code.

    • @BrainsCloud
      @BrainsCloud  4 ปีที่แล้ว

      Верстаю обычно в брекетсе - мне для верстки хватает. VS code тоже есть и юзаю, когда идет работа с CMS и тд.

  • @Alex-yh7pr
    @Alex-yh7pr 4 ปีที่แล้ว

    А можно flex: 1 0 100%;?

  • @СлаваГришин-б2б
    @СлаваГришин-б2б 3 ปีที่แล้ว

    У меня почему что текст в футер уходит я не могу даже его увидить

  • @timurfunplay
    @timurfunplay 3 ปีที่แล้ว

    Не получается !

  • @nazarpunks
    @nazarpunks 4 ปีที่แล้ว +1

    height:100vh на мобильниках криво работает.

  • @alijonalimov6093
    @alijonalimov6093 4 ปีที่แล้ว

    Это конечно круто, но для чего?)))))
    Снимайте более качественный контент)))))))))
    А то видео по типу "Как создать файл index.php" не очень))))))))
    Как создать файл index.php - th-cam.com/video/8va_Dqjvg0Y/w-d-xo.html

    • @serhii9004
      @serhii9004 4 ปีที่แล้ว

      а так что можно было?

  • @mishachubenko3394
    @mishachubenko3394 2 ปีที่แล้ว

    !!! Спасибо тебе , за твои 100vh вместо моих 100 % для свойства min-height: !!! А что такое за величина VH ???

  • @ВикторияИльина-н7о
    @ВикторияИльина-н7о 3 ปีที่แล้ว

    Спасибо большое!

  • @romanro8630
    @romanro8630 4 ปีที่แล้ว

    Спасибо!

  • @datoshcode
    @datoshcode 3 ปีที่แล้ว

    Спасибо!

  • @joxemnight
    @joxemnight 2 ปีที่แล้ว

    СПАСИБО!

  • @bulatozavrjuniorvoice4679
    @bulatozavrjuniorvoice4679 9 หลายเดือนก่อน

    СПАСИБО!