Как верстать под 100vh?

Question

[tester]

В последнее время часто просят сверстать лендинги, у которых первый экран должен занимать ровно 100% высоты.
Обычно высота такого блока ~1000px, на десктопе всё ок, но как вместить его на экране ноутбука, у которых высота окна <700px?

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

Один из таких моих проектов: https://tokmaganbet.ru/sites/azbuka4/
Вроде получилось, но как по мне я сверстал не совсем правильно

Comments

[Михаил]

Невпихуемое не впихнешь

Если контента много, то либо скрывать что-нибудь, либо ничего не делать

Answer 1

[Александр]

Правильное использование отступов и min-height: 100vh; поможет.
По поводу Вашего проекта - нету:
- main, зато есть section (имеется ввиду, что надо было использовать main);
- meta-тэги, их почти нет;
- outlin'ы - их вообще нет;
- Языки нельзя переключать с клавиатуры (читайте про tabindex).

Косяки:
- cursor: hand; не существует;
- Атрибут required содержит значение required;
- Ссылки, ведущие на сторонние ресурсы не имеют rel="noopener" или rel="noreferrer";
- Половина (2/3) ссылок для мессенджеров открывается в той же вкладке.

Также Lighthouse ругается - CSS и JS не минифицированы (что-то мне подсказывает, что картинки тоже).