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

Question

I have this situation (see img) where I got a fixed sidebar with a fixed width: 250px Now I want the content to have a full width minus the 250px But when ever I use calc(100% - 250px), I get -150% as a result in the browser.

see my code below

    .content {
  position: relative;
  left: 250px;
  width: calc(100% - 250px);
  width: -moz-calc(100% - 250px);
  width: -webkit-calc(100% - 250px);
  height: 100%;
  overflow-y: auto;
}

.sidebar {
  position: fixed;
  width: 250px;
  background-color: @primary_color;
  height: 100%;
  z-index: 998;
}

edit: the code was in less, so thats why my end brackets where missing

Why not just do it like this: https://jsfiddle.net/5f3pbg8b/6/ ? — Adam Buchanan Smith, May 26 '16 at 17:57

score 1 · Accepted Answer · answered May 26 '16 at 18:38

1

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

answered May 26 '16 at 18:38

G-Cyrillus

101,410
14
105
129

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

1 Answers1