CSS - Могу ли я использовать ширину объекта в Calc ()?

Question

Я хочу что-то вроде этого:

height: calc(width + 5px);

Это всего лишь небольшой пример, но я в конечном итоге ищу способ использовать заданную ширину как часть вычисления, а не более простой способ решить пример. Любой поиск, который я делаю, просто дает примеры того, как использовать calc() для установки ширины. Спасибо!

Answer 1

Если ваша ширина установлена ​​в px, вы можете использовать это же значение для расчета высоты.
Если он установлен в процентах (%), это может быть полезно:

.container {
  width: 20%;
  /* set the same percent as width in padding top of a container. */
  padding-top: calc(20% + 5px);
  background-color: aqua;
  position: relative;
}

/* This is the box where it is done. Because all the space in the container is padding, 
   you must to set this box as `absolute` and fill the container with 
   width and height set to 100% */
.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

<div class="container">
  <div class="box">
  </div>
</div>

Надеюсь, что вы ищете ..

Answer 2

Самое близкое, что вы могли бы получить с чистым CSS, это объединить переменные CSS с calc

:root {
	--width: 100px;
}
div {
	border: 1px solid red;
	height: calc(var(--width) + 5px);
	width: var(--width);
}

<div>
test
</div>

Это позволит вам определить переменную CSS --width и использовать ее для вычисления новой высоты для div.