Я хотел бы поделиться небольшим примером использования calc() CSS, который помог мне добиться отклика на высоту.
Мой вариант использования выглядит следующим образом
- Родительский элемент с некоторой статической высотой.
- Три дочерних элемента (для справки назовем их c1, c2 и c3), которые должны заполнить родителя.
- Из трех дочерних элементов два из них (c1 и c3) будут иметь статическую высоту, а c2 должен занимать оставшееся пространство.
- И c2 должен регулировать свою высоту при изменении размера окна, не мешая своим братьям и сестрам.
Чтобы достичь этого, мне нужно рассчитать высоту, необходимую для c2, сначала я попробовал следующее решение, чтобы найти высоту.
- Вычислите сумму высоты двух дочерних элементов (c1 и c3).
- Вычислить высоту родительского элемента.
- Теперь высота последнего дочернего элемента вычисляется из уравнения - высота родителя - сумма высоты элементов c1 и c3.
- Установите результирующую высоту для дочернего элемента c2.
- Чтобы автоматически регулировать высоту при изменении размера окна, зарегистрируйте обратный вызов изменения размера и повторите шаги с 1 по 4.
Что ж, этот метод будет работать хорошо, но его можно было бы сделать лучше.
Как это можно сделать лучше?
А вот и calc CSS. Есть много вариантов использования calc CSS, одно из них — микширование модулей, которое поможет мне в этом.
Итак, мое требование будет достигнуто с помощью следующих шагов.
- Вычислите сумму высоты двух дочерних элементов (c1 и c3).
- Теперь установите высоту дочернего элемента c2 как height: calc(100% — высота от шага 1).
Вот и все. Теперь все дочерние элементы будут помещаться в его контейнер, тогда как дочерний элемент c2 будет использовать оставшееся пространство, оставленное элементами c1 и c3.
Также стоит отметить, что это позволит элементу c2 регулировать свою высоту при изменении размера окна без использования обработчика события изменения размера.
