Search code examples
htmlcssiossafariheight

Virtual keyboard covers html element in Safari on iOS

  1. Editable html element takes 100% of a screen's height.
  2. On element focus a virtual keyboard comes up and covers partly element in Safari.

How to tell element by CSS/JavaScript to take 100% of visible height = 100vh - keyboard height ?

enter image description here

Solution

  • It seems to be the duplicate to this question and as Nathan Manousos commented

    window.visualViewport.height

    can help to find the actual visible content height on a phone.

    Thanks GhostPengy for pointing.