Несколько способов расчёта процентного соотношения элементов в дизайне:

• Использование процентных значений для вертикальных свойств в CSS. 2 Процентное значение для top/bottom padding/margin рассчитывается относительно ширины контейнера, куда входит элемент, значение которого пытаются изменить. 2 Процентное значение для height рассчитывается относительно высоты контейнера, куда входит элемент, значение которого пытаются изменить (аналогично для min/max height). 2 Процентное значение для top и bottom, служащих для позиционирования элемента, рассчитывается относительно высоты контейнера, куда входит элемент, значение которого пытаются изменить. 2
• Применение CSS переменных в сочетании с функцией calc. 4 С помощью этого подхода отступы в дочернем блоке автоматически корректируются согласно высоте родительского блока. 4
• Использование единиц высоты вьюпорта (vh). 4 Единицы vh привязаны к высоте вьюпорта, а не к родительскому блоку. 4
• Применение правила третей. 5 Это правило помогает создать сбалансированную композицию, разделив холст по горизонтали и вертикали на девять равных частей. 5