Why Is CSS Calc(100%-250Px) Not Working

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

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>

CSS calc() not working

To quote MDN

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. The * and / operators do not require whitespace, but
adding it for consistency is allowed, and recommended.

Space your stuff out, and it will probably work.

CSS3 calc(100%-88px) not working in Chrome

The problem in the question was caused by the lack of space around the subtraction operator.

Note that the grammar requires spaces around binary ‘+’ and ‘-’
operators. The ‘*’ and ‘/’ operators do not require spaces.

https://www.w3.org/TR/css3-values/#calc-syntax

^{This article mentions that the spacing is necessary for unambiguous parsing.}

Bad: calc(100%-88px)

Good: calc(100% - 88px)

---

How do I know it is not recognizing it? Because of the strikethrough
and the yellow triangle icon next to the style rule in chrome dev
tools.

A property that is struck through when viewed in Chrome's developer tools may be valid but overridden; however, a property struck through and with a warning triangle icon next to it is invalid.

---

2022 Update - calc() is supported by all modern browsers in a wide variety of scenarios, though proper spacing is still required.

height: calc(100%) not working correctly in CSS

You need to ensure the html and body are set to 100% and also be sure to add vendor prefixes for calc, so -moz-calc, -webkit-calc.

Following CSS works:

html,body {
    background: blue;
    height:100%;
    padding:0;
    margin:0;
}
header {
    background: red;
    height: 20px;
    width:100%
}
h1 {
    font-size:1.2em;
    margin:0;
    padding:0;
    height: 30px;
    font-weight: bold;
    background:yellow
}
#theCalcDiv {
    background:green;
    height: -moz-calc(100% - (20px + 30px));
    height: -webkit-calc(100% - (20px + 30px));
    height: calc(100% - (20px + 30px));
    display:block
}

I also set your margin/padding to 0 on html and body, otherwise there would be a scrollbar when this is added on.

Here's an updated fiddle

http://jsfiddle.net/UF3mb/10/

Browser support is:
IE9+, Firefox 16+ and with vendor prefix Firefox 4+, Chrome 19+, Safari 6+

width calc(100% - 250px) gives me a negative -150%

You need to escape the value of your rule else LESS compiles it.

It would be here :

 width: ~"calc(100% - 250px)";

https://github.com/SomMeri/less4j/wiki/Less-Language-Escaping

Css calc is not working on Safari

The proper syntax of CSS calc() function is -

calc(expression)

Where the expression can be built using +, -, * or / operators.

The comma , is not a valid operator to use inside calc(). Thus you are having an invalid property value of height inside the #SideBar.

Even you have to add space between operators and values.

You are having no space between - sign and 82px

So, your final code should looks like this -

#SideBar{
    height: calc(100vh - 82px);
    overflow: auto;
    /*Something more*/
}

Also safari still has some issue with viewport units, see here. You might want to use percentage value instead of viewport units. In this case the code will be -

#SideBar{
    height: calc(100% - 82px); /* Fallback for safari */
    height: calc(100vh - 82px); /* Supports for Chrome, FireFox, IE10+ */
    overflow: auto;
    /*Something more*/
}

Getting percentages to work in CSS calc() for Firefox and Safari?

Eureka. I've been struggeling with this for days. Finally found that 100vh instead off 100% would make it work with most browsers.

height: calc(100vh - 100px);

instead of

height: calc(100% - 100px);

Finally, now I can get on with my project.

---

Related Topics