Safari + CSS: using "calc" with "vh" does not work

css safari viewport-units
jdotjdot picture jdotjdot · Aug 27, 2014 · Viewed 27.1k times · Source

I'm encountering a very niche issue CSS issue on Safari.

I have the following CSS rule:

min-height: calc(100vh - 115.5px - 25px*2);

This works on Chrome, but Safari doesn't seem to like the combination of calc and vh. (It works if I replace vh with %, for example--but I do need to calculate based on vh or some appropriate alternative.)

Is there some way around this to make this work? Alternatively, is there another way to refer to vh that is calc-friendly on Safari?

Answer

DragonKnight picture DragonKnight · Mar 12, 2015

before you use vw or vh, you should define: 

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
}

and make sure you use spaces between + and - as you did.

Related questions

Safari CSS rule vh-units?

Does anybody know if there is a fix for Safari vh rule? #what{ min-height:70vh; } All working ok, in all browsers, but only in Safari it is not recognized? Is there a fix for safari, that we can use VH …

Read More
CSS vw and height 100% in Safari

It's really hard to format a good title of the question, because it cannot be explained with just a few words. An element with height of 100% and parent with fixed height in vw (viewport width) is not actually 100% tall on …

Read More
How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More