I've tested it in the most recent versions of Firefox, Chrome, IE 11. In none of those browsers it works when you use the CSS calc()
function to calculate e.g. width
. As far as I can see I have applied it properly. For reference you might want to check
http://www.sitepoint.com/css3-calc-function/
Why is this not working?
div {
background-color: blue;
height: 50px;
width: calc(100%-250px);
}
<div></div>
Demos:
http://codepen.io/anon/pen/wazZWm
http://jsfiddle.net/h5mzcow1/
Yes, this question developed to become a duplicate in the course of many edits, but I still think this should remain here, because it illustrates the problem better than for example CSS calc() not working . Also, imho the answer is much better.
The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules: + Addition.
Just give max-height:100% to the element and max-height:calc(100% - 90px) to the immediate parent element. It worked for me on IE also.
Custom properties and calc are the same computational amount as any other property or relative value, respectively. In short: no more than large amounts of CSS would.
In the simplest terms possible CSS calc is just a CSS function, similar to rgb , var , etc. that lets you do addition, subtraction, division, and multiplication on various CSS units.
It's because you have to put a space between the +
or -
operator in order for it to work properly.
div {
background-color: blue;
height: 50px;
width: calc(100% - 250px);
}
<div></div>
From the MDN docs:
Note: The
+
and-
operators must always be surrounded by whitespace. The operand ofcalc(50% -8px)
for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand ofcalc(50% - 8px)
is a percentage followed by a minus sign and a length. Even further,calc(8px + -50%)
is treated as a length followed by a plus sign and a negative percentage. The*
and/
operators do not require whitespace, but adding it for consistency is allowed, and recommended.Source: MDN
W3C Documentation
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With