Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is CSS calc(100%-250px) not working? [duplicate]

Tags:

css

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/

Edit:

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.

like image 989
connexo Avatar asked May 23 '15 12:05

connexo


People also ask

How does the CALC () function work on values in CSS?

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.

How do you use the calculator function height in CSS?

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.

Is CSS calc slow?

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.

Can you do multiplication in CSS?

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.


1 Answers

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 of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(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

like image 167
Renfei Song Avatar answered Jan 02 '23 10:01

Renfei Song