css 100% minus pixels not working in jquery and Chrome devtools,

The following not working:

$(".mydiv").css({height: "calc(100%-50px)"});

It did not work either in Chrome devtools. Using 100% for responsive to window resize.

But it works in css style sheet:

.mydiv {
    height: calc(100%-50px);
}

CodePudding user response：

Spaces are required when using (addition) or - (subtraction) with calc().

From MDN:

The and - operators must be surrounded by whitespace. For instance, calc(50% -8px) will be parsed as a percentage followed by a negative length — an invalid expression — while calc(50% - 8px) is a percentage followed by a subtraction operator and a length. Likewise, calc(8px -50%) is treated as a length followed by an addition operator and a negative percentage.

Your code:

body>div {
  width: 100px;
  height: 100px;
  outline: 1px solid red;
}
div>div {
  width: 100%;
  height: calc(100%-50px);
  outline: 1px solid green;
}

<div><div></div></div>

Corrected code:

body>div {
  width: 100px;
  height: 100px;
  outline: 1px solid red;
}
div>div {
  width: 100%;
  height: calc(100% - 50px);
  outline: 1px solid green;
}

<div><div></div></div>