css calc height from width

CSS Calc — достаточно новая и еще очень редко используемая функция. Она позволяет выполнять простые арифметические операции непосредственно при описании стилей с использованием всех видов единиц измерения. Это очень удобно для вычисления размеров, положения, преобразования и сглаживания цветных элементов.

Синтаксис CSS calc

Выражение представляет собой комбинацию значений и символов математических операций:

+ сложение

вычитание

* умножение

/ деление

Знаки сложения и вычитания должны содержать дополнительные пробелы с обеих сторон.
Все расчеты выполняются в соответствии со стандартными правилами порядка выполнения действий.
Для понятия синтаксиса рассмотрим следующие примеры:

Поддержка браузеров

В настоящее время calc поддерживается всеми настольными браузерами:

  • IE9
  • Opera (не поддерживается до версии 15).
  • Firefox до version 16 поддерживает значение -moz-calc.
  • Chrome до version 26 поддерживает значение -webkit-calc.
  • Safari до version 6 поддерживает значение -webkit-calc.

Примеры кросбраузерных стилей с использованием префиксов:

CSS calc при создании макета

Создание макета для любых веб-приложений всегда начинается с установки размеров и позиций всех основных элементов. В тоже время, в зависимости от целей проекта и конструктивных особенностей различных комбинаций единиц могут использоваться (%, px, em, rem).

Calc позволяет решить проблему резиновой верстки:

  1. объединением фиксированных и резиновых блоков;
  2. взаимным расположением фиксированных и/или резиновых элементов;
  3. установки размеров без использования длинных бесконечных дробей (например, 14.857142857%) и другое.

На сегодняшний день самая типичная задача содержит следующие требования:

  • часть элементов должны быть эластичными, т.е. указаны в процентах от ширины или высоты (обычно главный контент);
  • часть элементов должны быть установлены с фиксированной шириной (в зависимости от требований они могут быть добавлены в блоках, меню, баннерах, боковых панелях и т.д.);
  • расстояние между блоками в фиксированных единицах fixed (px, em, rem) или же относительных relative (%).

Рассмотрим пример, имеется макет с 3 — мя колонками, правая и левая колонки имеют фиксированную ширину 200px, центральная занимает оставшееся место. Между колонками должно быть фиксированное расстояние не более 15px.
Без calc пример ниже требует дополнительных контейнеров — containers, дополнительных margins, paddings, floats и другое. С использованием calc в CSS получается следующее:

I have implemented a GoogleMapsV3 map in a twitterBootstrap basic responsive design site.

But my question is quite simple: i have:

I’d like to be able to change the height to a form factor. Like in this «in my dreams CSS»

I have tried leaving out height, setting to auto, and all sorts of persentages — but only to make the div collapse on me always.

I have no problem writing a js-solution, but hope for a simple cleancut CSS solution, possible CSS3

If not possible, what would be the optimal way to js me out of this?? (timers, events. or the like)

9 Answers 9

For this, you will need to utilise JavaScript, or rely on the somewhat supported calc() CSS expression.

Or using CSS calc (see support here: http://caniuse.com/calc)

Here it is. Pure CSS. You do need one extra ‘container’ element.

The fiddle

The solution.

Note I’m using an 100% throughout the example. You can use whichever percentage you’d like.

Since height percentages are relative to the height of the parent element, we can’t rely on it. We must rely on something else. Luckily padding is relative to the width — whether it’s horizontal or vertical padding. In padding-xyz: 100% , 100% equals 100% of the box’s width.

Unfortunately, padding is just that, padding. The content-box’s height is 0. No problem!

Stick an absolutely positioned element, give it 100% width, 100% height and use it as your actual content box. The 100% height works because percentage heights on absolutely positioned elements are relative to the padding-box of the box their relatively positioned to.

Можно ли получить ширину блока и применить ее для высоты?

Как то так:
height: calc(width * 2);

  • Вопрос задан более двух лет назад
  • 2138 просмотров

Да, можно, например, с помощью псевдоэлементов. Блок всегда заданных пропорций (высота считается как % от ширины): https://jsfiddle.net/Ankhena/cLhxv7eq/
В примере всегда квадратный блок, для изменения пропорций нужно изменять %%

Через переменные не получится, потому что:
либо мы знаем ширину в точках или vw — тогда не нужен calc
либо она у нас в процентах — получим проценты, но проценты эти будут от высоты родителя, а не ширины. (Собственно для умножения процентов тоже не нужен calc)

k-2 calc имеет смысл, если мы хотим сложить, например, % и пиксели. Потому что не знаем 90% это сколько пикселей на данный момент.
Если мы хотим 90% умножать на 2, то в состоянии сразу написать 180%, а не напрягать браузер излишними пересчетами.
Кроме того, если ширина 90%, а высоте мы зададим 180%, то не получим высоту в 2 раза больше ширины.

А вот вариант задавать высоту через vw может помочь.

k-2, со смартфона не удобно делать примеры jsfiddle
Доберусь до компа сделаю.

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

Оцените статью