0

I am trying to set the height of a section using calc function as follows - 

{
    min-height: calc(100vh - 291px);
    min-height: -webkit-calc(100vh - 291px);
}

This works in all browsers but Safari. Safari does not show any error. It reads this property but the calculation it makes is not accurate and breaks the layout. Can anyone explain what's going on and how can this be fixed?

Please note - I am aware of the JS workarounds but I cannot use JS here.

Thanks in Advance

Archit Arora
  • 2,508
  • 7
  • 43
  • 69

1 Answers1

1

See Caniuse, also look at this SO question

Safari & iOS Safari (both 6 and 7) does not support viewport units for border widths, column gaps, transform values, box shadows or in calc().

Hash
  • 7,726
  • 9
  • 34
  • 53