CODEWITHSUNDEEP
css
Benjamin RD
Benjamin RD

Reputation: 12034

Css calc is not working on Safari

I have this css rule:

#SideBar{
height: calc(100vh, -82px);
overflow: auto;
/*Something more*/
}

The problem is that, in all the other browser like: IExplorer, Chrome, Opera, Firefox, but in Safari is not working this rule? Exist an alternative rule to set the height?

Upvotes: 1

Views: 3919

Answers (2)

aniskhan001
aniskhan001

Reputation: 8521

The proper syntax of CSS calc() function is -

calc(expression)

Where the expression can be built using +, -, * or / operators.
The comma , is not a valid operator to use inside calc(). Thus you are having an invalid property value of height inside the #SideBar.

Even you have to add space between operators and values.
You are having no space between - sign and 82px

So, your final code should looks like this -

#SideBar{
    height: calc(100vh - 82px);
    overflow: auto;
    /*Something more*/
}

Also safari still has some issue with viewport units, see here. You might want to use percentage value instead of viewport units. In this case the code will be -

#SideBar{
    height: calc(100% - 82px); /* Fallback for safari */
    height: calc(100vh - 82px); /* Supports for Chrome, FireFox, IE10+ */
    overflow: auto;
    /*Something more*/
}

Upvotes: 5

ondObno
ondObno

Reputation: 91

Try without comma there or with -webkit-calc () prefix

Upvotes: 2

Related Questions