Памятка по размерам
Существуют различные относительные размеры в CSS. В основном это: %, vw, vh.
Проценты в CSS - это размер относительно родителя, при этом высота в % будет считаться от высоты родителя.
Ширина, соответсвенно, будет считаться от ширины родителя. В абсолютном большинстве случаев лучше
использовать %, а не vh или vw.
vw - это view width, размер относительно ширины окна. Однако, у него есть проблема - он не учитывает
скроллбар страницы. Наглядно показано на рисунке ниже:
Поэтому % и лучше.
По аналогии vh - это view height - размер относительно высоты страницы. Её тоже лучше заменять % - но не
всегда это получается. body по умолчанию растягивается на всю ширину окна, но не растягивается на всю
высоту. Поэтому, поставив % элементу внутри body, вы ничего не добьётесь. Вместо этого можно использовать
vh.
Однако, и тут не всё просто - на телефонах вас будет преследовать проблема с уменьшающейся при скролле
строкой поиска. Для этого и придумали размеры: svh, lvh и dvh:
svh - small view height, наименьшая высота окна, когда строка поиска раскрыта.
lvh - large view height, наибольшая высота окна, когда строка поиска скрыта.
dvh - dynamic view height, динамическая высота окна, меняется в зависимости от статуса строки поиска.
Очевидно, наиболее универсальным вариантом будет dvh, но вы можете использовать и другие в случае
необходимости.