sass: calculation between vh and px

Question

I have a slideshow on my landing screen that I want it to be fullscreen combined with a 70px height nav bar, I am trying to use sass so that I don't have to write javascript code for this, but

.slideshow{height:100vh-70px}

doesn't work. I don't know how sass calculates it, the CSS turns out to be

.slideshow{height:99.27083vh}

I did a quick search against this issue but couldn't find any useful information. So is this doable at all?

And if no, is there anyway to do it without javascript?

Answer 1

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

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