100% height page too big on iPad because of url field

Question

I have this page which has a header and a footer at the bottom.

article {
  min-height: calc(100vh - 204px);
}

header, footer {
  border: 1px solid #000;
  height: 100px;
}

<main>
  <header>...</header>
  <article>...</article>
  <footer>...</footer>
</main>

DEMO

This works, but on the iPad it doesn't fit, part of the footer is of the screen (page is too height). This has to do with the header of the browser/safari (checkout the screenshot). Without the url part the page fits. Is there some way to fix this ?

Answer 1

You can try with a little of javascript, like it is described here:

jQuery/JS, iOS 4 and $(document).height() problems

you can calculate the height of the page like this:

var getIOSWindowHeight = function() {
    // Get zoom level of mobile Safari
    // Note, that such zoom detection might not work correctly in other browsers
    // We use width, instead of height, because there are no vertical toolbars :)
    var zoomLevel = document.documentElement.clientWidth / window.innerWidth;

    // window.innerHeight returns height of the visible area. 
    // We multiply it by zoom and get out real height.
    return window.innerHeight * zoomLevel;
};