title: Using React how to adjust Mobile Safari height with and without address bar and tabs
body: <p>I have a webpage that consists of three panels: header, main and footer. In my .css file, I have successfully adjusted my webpage to fill 100% of the screen's vertical height using "100vh".</p>
  
  <pre><code>.EventHeader {
    height: 60px;
  }
  
  .EventMain {
    height: calc(100vh - 140px);
    text-align: left;
    overflow-y: auto;
  }
  
  .EventFooter {
    height: 80px;
  }
  </code></pre>
  
  <p>While this works great with most mobile devices, I'm finding that in iOS Safari their address bar and tabs play havoc to the actual display. If the address bar and tabs are visible, the webpage fills more than 100% of the screen. However, once these two items disappear the webpage takes up 100% of the vertical height as desired.</p>
  
  <p>For example, if vertical height is 720px, then in all mobile devices except iOS Safari, these are the heights of the panels (i.e. in aggregate takes up <strong>exactly</strong> 100% of the vertical height but not more than 100%):</p>
  
  <p>EventHeader: 60px</p>
  
  <p>EventMain: 580px which is 720 - 60 - 80</p>
  
  <p>EventFooter: 80px</p>
  
  <p>"vh" property reads 720px</p>
  
  <p>When the page origianlly renders in iOS Safari and the address bar and tabs are visible (which take up roughly 44px), these are the heights of the panels (i.e. in aggregate takes up 764px which is 44px <strong>more</strong> than 100% of the vertical height):</p>
  
  <p>EventHeader: 60px</p>
  
  <p>EventMain: <strong>624px</strong> which is 720px - 60px - 80px + <strong>44px</strong></p>
  
  <p>EventFooter: 80px</p>
  
  <p>"vh" property reads 764px</p>
  
  <p>But once the address bar and tabs have disappeared (roughly 15 seconds later), these are the heights of the panels (i.e. in aggregate takes up <strong>exactly</strong> 100% of the vertical height but not more than 100%):</p>
  
  <p>EventHeader: 60px</p>
  
  <p>EventMain: 580px which is 720 - 60 - 80</p>
  
  <p>EventFooter: 80px</p>
  
  <p>"vh" property reads 720px</p>
  
  <p>So while the actual vertical height of the window is <strong>always</strong> 720px, the vertical height is somehow modified based of the visibility of the address bar and tabs in iOS Safari.</p>
  
  <p>Unless I'm completely mistaken, this cannot be fixed using flexbox or other similar approaches. Rather, it is a specific issue with iOS where the <strong>height.inner</strong> property of the window changes based on the visibility of the address bar and tabs. And, this attribute is what is recorded in the "vh" property in css.</p>
  
  <p>I have searched around and found that the best solution is in the following article:</p>
  
  <p><a href="https://github.com/alvarotrigo/fullPage.js/issues/2414" rel="nofollow noreferrer">https://github.com/alvarotrigo/fullPage.js/issues/2414</a></p>
  
  <pre><code>var height = window.innerHeight;
  var a = setInterval(function() {
      $(window).scrollTop(-1);
      resize();
  }, 500); // Don't lower more than 500ms, otherwise there will be animation-problems with the  Safari toolbar
  
  $(window).on('resize', function() {
      resize();
  });
  
  var resize = function() {
      if(window.innerHeight != height) {
          height = window.innerHeight;
          $('.section').css('height', height + 'px');
      }
  };
  </code></pre>
  
  <p>However, it is in jQuery and I am having problems converting it to pure JS and using it in a React program.</p>
  
  <p>I understand the basic process:</p>
  
  <ul>
  <li>set the css "height" parameter to "innerHeight"</li>
  <li>after a defined period of time, assume that the address bar and tabs have disappeared</li>
  <li>treat this disappearance as a window resizing</li>
  <li>on a window resizing, reassign the "height" parameter to "innerHeight"</li>
  </ul>
  
  <p>Also, how would I send this "height" parameter and its assigned value back to my .css file?</p>
  
  <p>Do I instead need to use inline styling?</p>
  
  <p>Any help would be appreciated. Thanks.</p>