sass: calculation between vh and px
19,856
Solution 1
Try using CSS calc. It's pretty widely supported.
.slideshow {
height: calc( 100vh - 70px );
}
Solution 2
No, it isn't.
SASS calculations are performed when the SASS is compiled down to CSS.
The height of the viewport isn't known until the page is loaded into the browser. So you can't take that height, convert it to pixels, and do calculations with it.
Author by
shenkwen
Updated on July 13, 2022Comments
-
shenkwen almost 2 years
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?
-
mukade about 4 yearssubarashiii *o*