What Is Result of Calc() in CSS

What Is Result Of calc() In CSS

The spec does not define very strictly what the computed value of a calc() expression is, however it does say that percentages are never calculated as part of the computed value. How exactly this value is represented is left as an implementation detail.

If you see a pixel length instead of a percentage, then that length is the used value, not the computed value, because the pixel value can only be determined after calculating any percentages and laying out elements.

Note that getComputedStyle() may return results that are inconsistent with the CSS definition of "computed value". This is one of many unfortunate consequences of browsers doing their own thing back in the 90s.

CSS calc() function

You cannot divide by units, only by numbers.

Evaluate CSS calc function in JS

You can get the computed style using Window.getComputedStyle(). Check out the compatibility table.

Then, grab the width and remove the "px" from the result, and parse it to an integer:

let myElement = document.getElementById('child');let width = parseInt(window.getComputedStyle(myElement).width.slice(0, -2), 10);console.log(width);

#parent {  background: red;  height: 100px;  width: 80%;}
#child {  background: green;  height: 60px;  width: calc(100% - 64px);}

<div id="parent">  <div id="child"></div></div>

css calc number division

The problem is with calc(2 / 3) you will just get a number without an unit. CSS can't display just a number as width. This would be like if you set width: 3 which obviously doesn't work.

If you want the percentage you will need to muliply it by 100%

width: calc(2 / 3 * 100%);

and if you really want the result in pixels multiply it by 1px

width: calc(2 / 3 * 1px);

Calculating fluid CSS element sizes using CSS using calc(px + vw)

You need to solve the equation Y = A*X + B where in your case Y is the width and X is 100vw So width: calc(A*100vw + B)

When 100vw = 1920px you need width: 150px so we have

150px = A*1920px + B

When 100vw = 375px you need width: 110px so we have

110px = A*375px + B

We do some math and we get A = 0.026 and B = 100.3

Your code is width: calc(0.026*100vw + 100.3px) Also width: calc(2.6vw + 100.3px)

---

You can also write it as

--a: ((150 - 110)/(1920 - 375));
--b: 150px - 1920px*var(--a);  /* OR 110px - 375px*var(--a) */
width: calc(var(--a)*100vw + var(--b));

body {
  font-size: 18px;
}

.box {
  width: calc(2.6vw + 100.3px);
  height: 100px;
}

.box-alt {
  --a: ((150 - 110)/(1920 - 375));
  --b: 150px - 1920px*var(--a);
  width: calc(var(--a)*100vw + var(--b));
  height: 100px;
}

<div class="box" style="background:red;color:white;margin:10px;">

</div>

<div class="box-alt" style="background:red;color:white;margin:10px;">

</div>

Is there a way to use use the width of self in a CSS calc rule?

You can use padding-top: 100%; to make width:height = 1:1.

Reference: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

How can I assign the value of a css calc() to a css-variable, and not have it delay the calculation until the css-variable is used

I found a "perfect" work around!.

The solution to this is to use the 'resize' event to read the size of the element you wanted use 100% on using getBoundingClientRect(); and using the width returned to set the "calc" as width px - whatever

So for the example in the question I would use this code

_resize() {
    if (this.resizeInProgress) return;
    this.resizeInProgress = true;
    requestAnimationFrame(() => {
        const container = this.shadowRoot.querySelector('.flex');
        const bound = container.getBoundingClientRect();
        container.style.setProperty('--div-width', `calc(${bound.width}px - 10px)`);
        this.resizeInProgress = false;
    });
  }

I bind that function to this in my custom element constructor

this.resizeInProgress = true;
this._resize = this._resize.bind(this);

and this in the connectedCallback do

window.addEventListener('resize', this._resize);
this.resizeInProgress = false;

and in my disconnectedCallback remove it again with

this.resizeInProgress = true;
window.removeEventListener('resize', this._resize);

I retain the calc() function because in my real life cases as the amount subtracted is in "em" units

---

Related Topics