title: How can I get a mobile phone’s virtual keyboard height using javascript or css?
body: <p><strong>Problem:</strong></p>
  <p>I want to put a fixed element just above the mobile phone’s virtual keyboard like in the picture below. I want the <code>div</code> to be fixed above the virtual keyboard. Also, I am using react. Is there a way of fixing this using the framework?</p>
  <p><a href="https://i.stack.imgur.com/GBp93.jpg" rel="nofollow noreferrer"><em><strong>Refer to this picture</strong></em></a></p>
  <p><strong>My temporary solution:</strong></p>
  <p>I hardcoded the <code>bottom position</code> of the <code>div</code> so it sits above the virtual keyboard. However, I want it to be flexible and responsive to all different mobile devices. I tried searching for answers on the internet but none of them worked for me.</p>
  <pre><code>.toolbar {
  position: absolute;
  bottom: 270px;
  }
  </code></pre>
  <p>Are there any possible solutions to help adjust this? Any help would be great and I’d really appreciate it.</p>