В мире фронтенд-разработки создание адаптивного дизайна имеет решающее значение для обеспечения отличного внешнего вида вашего веб-сайта на всех устройствах. Одной из распространенных проблем является вычитание фиксированного значения пикселя из процентного значения высоты области просмотра (VH). В этой статье блога мы рассмотрим различные методы достижения этой цели, используя разговорный язык и попутно предоставляя примеры кода. Давайте погрузимся!

Метод 1: функция CSS Calc
Функция CSS calc()позволяет нам выполнять вычисления в стилях CSS. Чтобы вычесть 90 пикселей из 100% VH, мы можем использовать следующий фрагмент кода:

height: calc(100vh - 90px);

Этот метод широко поддерживается современными браузерами и обеспечивает простое решение.

Метод 2: расчет JavaScript
Если вам нужна большая гибкость или динамичные вычисления, вы можете использовать JavaScript. Вот пример использования JavaScript для вычитания 90 пикселей из внутренней высоты окна:

var vh = window.innerHeight;
var subtractedHeight = vh - 90;
document.getElementById("yourElement").style.height = subtractedHeight + "px";

Обязательно замените "yourElement"на идентификатор элемента, к которому вы хотите применить высоту.

Метод 3: пользовательские свойства CSS (переменные)
Пользовательские свойства CSS, также известные как переменные CSS, позволяют нам определять и использовать переменные в наших таблицах стилей. Мы можем использовать эту функцию, чтобы вычесть 90 пикселей из 100 % VH:

:root {
  --subtract-px: 90px;
}
.your-element {
  height: calc(100vh - var(--subtract-px));
}

Определив --subtract-pxв качестве переменной, мы можем легко настроить вычитаемое значение пикселя для нескольких элементов.

Метод 4: медиа-запросы
Если вычитаемое значение фиксировано и не меняется динамически, вы также можете рассмотреть возможность использования медиа-запросов. Вот пример:

@media (min-height: 630px) {
  .your-element {
    height: 540px;
  }
}

В этом случае, когда высота области просмотра составляет 720 пикселей или выше, .your-elementбудет иметь высоту 630 пикселей (100% VH – 90 пикселей).

Вычитание 90 пикселей из 100 % VH может показаться сложной задачей, но с помощью методов, описанных в этой статье, вы сможете добиться этого без особых усилий. Предпочитаете ли вы использовать вычисления CSS, вычисления JavaScript, пользовательские свойства CSS или медиа-запросы, теперь в вашем наборе инструментов есть несколько методов для решения этой задачи. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим конкретным требованиям.