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?

Mckinzie

Try calc() — a CSS feature. – Electromyography

Answer 1

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

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

Ori

subarashiii *o* – Bernettabernette

Answer 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.

Necrophilia

Answer 3

I think it's just a space issue just add space before and after the operator and put it between round brackets, it will work.

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

Top

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Veterinary

Answer 4

The height on css it us used like this below: height: auto|length|%|initial|inherit;

However, each of these should represent by numbers of px or etc. And the description for each value as following:

auto:(default) The browser calculates the height.

length:Defines the height in px, cm, etc.

%:Defines the height in percent of the containing block.

initial:Specifies that the value of the property should be set to the default value. inherit:Specifies that the value of the property should be inherited from the parent element.

Example to set the height and width for a paragraph is like this:

P {height: 100px; Width:100px;}

Schottische