css-calc

Hi so let me start by showing you how I would do this in SCSS: $submenu-padding-left: 1.5em; transform: translateX(calc(-#{$submenu-padding-left} + .5em)); which would compile to: transform: translateX(calc(-1.5em - .5em)) Basically SCSS allows me to concatenate a minus symbol - with a variable in order to convert it to a negative value. Is it possible to achieve this with CSS Variables? Yes you can do it. Simply multiply by -1 : :root { --margin-l: 50px; } body { padding: 0 100px; border:1px solid; } .box-1 { background: red; height: 100px; width: 200px; margin-left: calc(-1 * var(--margin-l)

From what I've seen in other answers , CSS viewport units can't be used in calc() statements yet. What I would like to achieve is the following statement: height: calc(100vh - 75vw) Is there some workaround way I can achieve this using purely CSS even though the viewport units can't be used in the calc() statement? Or just CSS and HTML? I know I can do it dynamically using javascript, but I'd prefer CSS. Danield Before I answer this, I'd like to point out that Chrome and IE 10+ actually supports calc with viewport units. FIDDLE (In IE10+) Solution (for other browsers): box-sizing 1) Start of

@media screen and (max-width: calc(2000px-1px)) { .col { width: 200px; } } The value after subtraction should be 1999px , however it does not seem to be working. If I manually change it to 1999px it works fine, so I know it's not a problem with my CSS. Is calc not supported within media queries, or am I doing something wrong? ANSWER WAS EDITED 13.02.2018: Using calc in media queries is supported by the spec, but support was only implemented by browsers recently (February 2018). Currently, calc in media queries is supported by Safari Technology Preview 49+ , Chrome 66+ , and Firefox 59+ . See

I'm trying to get a table with fixed-width td s and variable-width td s. Im using the CSS calc() function, but somehow it seems like I can't use % in tables. So that is what I have so far: <table border="0" style="width:100%;border-collapse:collapse;"> <tr style="width:100%"> <td style="width:30px;">1</td> <!--Fixed width--> <td style="width: calc( (100% - 230px) / 100 * 40);">Title</td> <!--Width should be 40% of the remaining space--> <td style="width: calc( (100% - 230px) / 100 * 40);">Interpret</td> <!--Width should be 40% of the remaining space--> <td style="width: calc( (100% - 230px) /

I am trying to dynamicly change the width of a div using CSS and no jquery. The following code will work in the following browsers: http://caniuse.com/calc /* Firefox */ width: -moz-calc(100% - 500px); /* WebKit */ width: -webkit-calc(100% - 500px); /* Opera */ width: -o-calc(100% - 500px); /* Standard */ width: calc(100% - 500px); I want also support IE 5.5 and higher , i found the following: expression. Is this the correct usage: /* IE-OLD */ width: expression(100% - 500px); Can I also support Opera and the Android browser? Danield Almost always box-sizing: border-box can replace a calc rule