css 100% 负像素在 jquery 和 Chrome devtools 中不起作用

Question

css 100% 负像素在 jquery 和 Chrome devtools 中不起作用，

以下无效：

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

它在 Chrome devtools 中也不起作用。使用 100% 响应 window 调整大小。

但它以 css 风格工作 sheet:

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

Answer 1

使用 +（加法）或 -（减法）和 calc() 时需要空格。

来自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.

您的代码：

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>

更正后的代码：

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>

css 100% 负像素在 jquery 和 Chrome devtools 中不起作用

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

css

jquery