How to Use Vh Minus Pixels in a CSS Calc()

Is it possible to use vh minus pixels in a CSS calc()?

It does work indeed. Issue was with my less compiler. It was compiled in to:

.container {
  min-height: calc(-51vh);
}

Fixed with the following code in less file:

.container {
  min-height: calc(~"100vh - 150px");
}

Thanks to this link: Less Aggressive Compilation with CSS3 calc

How do I use calc(100%-50px) to minus the pixels from the top?

You can place it on top by

.treemap-chart-container { display: flex; flex-direction: column-reverse; }

Then you may place it on bottom again

.treemap-chart-container { display: flex; flex-direction: column; }

sass: calculation between vh and px

Try using CSS calc. It's pretty widely supported.

.slideshow {
    height: calc( 100vh - 70px );
}

CSS `height: calc(100vh);` Vs `height: 100vh;`

There's no difference, since any time the expression calc(100vh) is calculated, it always ends up being 100vh.

How to prevent Less from trying to compile CSS calc() properties?

Less no longer evaluates expression inside calc by default since v3.00.

Original answer (Less v1.x...2.x):

Do this:

body { width: calc(~"100% - 250px - 1.5em"); }

In Less 1.4.0 we will have a strictMaths option which requires all Less calculations to be within brackets, so the calc will work "out-of-the-box". This is an option since it is a major breaking change. Early betas of 1.4.0 had this option on by default. The release version has it off by default.

JQuery Get element .height() then subtract 100vh?

vh is a unit representing 1% of the Viewport Height

window.innerHeight is the px value of the height of the viewport

Being as both of these are targeting the layout viewport, you should be fine to do:

let myHeight = $('#luxy').height() - window.innerHeight;

How to use calc() in tailwind CSS?

theme()

Use the theme() function to access your Tailwind config values using dot notation.

This can be a useful alternative to @apply when you want to reference a value from your theme configuration for only part of a declaration:

.content-container {
  height: calc(100vh - theme('spacing.7'));
}