title: Check if mobile browser and bottom toolbar showing?
body: <p>I want to position “<strong>No results found</strong>” text in a div residing in body tag that has:</p>
  
  <pre><code>{
     height:100%;
  } 
  </code></pre>
  
  <p>The div has:</p>
  
  <pre><code>margin-top: calc(50vh - 100px);
  </code></pre>
  
  <p>It looks ok except on iPhone Safari and Chrome (and I suspect Android) portrait mode. In that case a navigation toolbar appears at the bottom, pushing everything else up. </p>
  
  <p>So in that case I want to use:</p>
  
  <pre><code>margin-top: calc(50vh - 140px);
  </code></pre>
  
  <p>assuming the bottom browser menu bar is 40px. That way hopefully the text would look more vertically centered.</p>
  
  <p>What’s the best way to detect if those bottom menu bars are showing?</p>