🪗 Что такое vh и зачем он нужен?

Если vw работает с шириной, то vh зависит от высоты экрана. Тут всё просто: 1vh равен 1% от высоты окна браузера.

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

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

Из-за этого базовые 100vh часто ведут себя криво. Мобильное меню вроде открывается на весь экран, но кусок полезного контента просто прячется под панелью браузера. Высота считается совсем не так, как вы задумывали.

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

Классический vh отлично работает для привязки к высоте окна на десктопе. А вот на смартфонах нужно быть внимательнее. Там 100vh далеко не всегда дает идеальное попадание в видимую зону.

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

Салют! 🤘
Добрались до финала. Девятый урок бесплатного курса по Taptop уже в боте.
⠀
Закрываем лендинг ГКВ. Мы прошли путь от пустого экрана и UI-kit до полностью сверстанных блоков и адаптивов. Осталось вдохнуть в проект жизнь.
⠀
В новом уроке работаем с анимациями и шлифуем верстку:
• Подключаем Lenis для плавного скролла.
• Анимируем заголовки через маску и выезд букв ГКВ.
• Работаем с настройками easing и delay.
• Скрываем элементы при скролле и меняем фон хедера.
• Настраиваем анимацию футера и переносим эффекты на планшеты и мобилки.
• Добиваем мелкие правки и проверяем весь сайт.
⠀
Мы показываем реальный подход. Нельзя накидать эффекты на глаз. Нужно публиковать, проверять, подгонять триггеры, offset и z-index под реальный скролл. Урок объемный, так что разделили его на 3 части.
⠀
Кто прошел всё от и до — поздравляем 🎉
Вы собрали сложный лендинг, который можно использовать как фундамент для новых проектов.
⠀
Не пугайтесь, если что-то не получилось с первого раза. Это норма. Sticky, попапы, ховеры и CMS всегда требуют отладки. Главное уловить саму логику работы в Taptop.
⠀
Финальный урок уже ждёт вас в боте:
@Izum_Study_bot

🦢 Почему Header, Nav, Main и Section — не просто красивые названия?

В визуальном конструкторе легко собрать всю страницу из обычных div’ов. Пользователь разницы почти не заметит: блоки стоят на месте, ссылки работают, дизайн совпадает на 100%. Но вот для браузера и поисковых систем такая структура — это темный лес.

Семантические теги как раз объясняют роли элементов:
• Header — верхняя часть страницы;
• Nav — основная навигация;
• Main — главный контент;
• Section — самостоятельный смысловой раздел;
• Footer — нижняя служебная и навигационная часть.

Это не магическая кнопка для SEO. Один тег сам по себе не выведет ваш сайт в топ поисковика. Но он делает документ логичнее, помогает роботам разбирать страницу и упрощает работу скринридеров.

Главное — не превращать семантику в религию. Не каждый блок обязан быть Section, и не каждую группу ссылок нужно оборачивать в Nav. Тег должен соответствовать своей реальной роли, а не ставиться просто ради галочки.

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

Как часто запариваетесь с семантикой на своих проектах? 👇

🦢 SVH или DVH: что юзать в мобильных адаптивах?
⠀
На десктопе собрать полноэкранный блок проще простого. Ставим 100vh — и готово, секция занимает весь монитор. На мобилках эта магия ломается: в игру вступают адресная строка, нижняя навигация и другие панели браузера.
⠀
👨‍💻 Как работает 100svh?
Единица считается от минимальной высоты экрана, когда все панели открыты. Блок аккуратно встаёт в видимую зону, а контент не прячется под интерфейсом браузера.
⠀
Но есть подвох. При скролле панели исчезают, экран становится больше, а высота блока остаётся прежней. По итогу снизу может появиться пустота.
⠀
⚡️ Что происходит с 100dvh?
Здесь всё работает в динамике. Панели ушли — блок вытянулся. Вернулись — сжался. Топ для секций, которые должны всегда занимать всю доступную высоту экрана.
⠀
Но и тут не всё так сладко. Браузер постоянно пересчитывает высоту, поэтому контент может дёргаться и смещаться прямо во время скролла.
⠀
Что ставить на практике:
• svh — берём ради стабильной высоты, когда важно показать весь контент;
• dvh — юзаем, если блок должен чётко заполнять текущую видимую зону;
• vh — оставляем запасным значением, если небольшой заезд контента под панели не критичен.
⠀
Например, svh отлично встанет на экран с важной кнопкой внизу. А dvh — топ для обложки или визуальной секции, которая всегда должна занимать 100% экрана.
⠀
🖥 Height или min-height?
Для обычных секций чаще лучше юзать min-height, а не жёсткий height.
⠀
При height: 100svh блок фиксируется наглухо. Добавили больше текста, включили локализацию или открыли сайт на слишком низком экране — контент вывалился за границы.
⠀
min-height: 100svh задаёт нужную базу, но не мешает секции расти вместе с контентом. Жёсткий height оставляем только там, где объём контента полностью контролируется.
⠀
💡 По итогу
Главная ошибка — искать одну волшебную единицу под весь адаптив. Её нет.
⠀
На одной странице абсолютно нормально миксовать svh для стабильного интерфейса и dvh для полноэкранных секций. Сначала решаем, как должен вести себя конкретный блок, и только потом выбираем единицу. Без магии и костылей — чисто под задачу.

⚡️ Напоминаем: сегодня в 16:00 проводим совместный эфир с Сергеем Телидченко.

Тема — как подготовить макет к вёрстке.

Андрей покажет типичные ошибки и разберет как подготовить макет в Figma правильно: адаптивы, скрытые элементы, UI-kit, состояния интерфейса и анимации. Всё покажем на реальном Figma-файле, по которому уже свёрстана методичка IZUM.

Ссылка на эфир будет в комментариях к этому посту и в нашей закрытой группе STUDY. ✌️