JSFiddle - React, Tailwind, and code Playground

HTML

<div id="apple_ios_status_bar_background"></div>
    <header>
        111
    </header>
    <main>
        222
    </main>
    <footer>
        333
    </footer>

CSS

#apple_ios_status_bar_background {
    display: none;
    position: relative;
    height: 20px;
    width: 100%;
    background: #3498DB;
}

html {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%:
}

body {
    display: table;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

main {
    height: calc(100% - (40px + 20px));
    background-color: #219552;
}

header {
    height: 40px;
    background-color: #00b9ca;
}

footer {
    position: absolute;
    bottom: 0px;
    height: 20px;
    width: 100%;
    background-color: #dff0d8;
}

JavaScript

function ChangeOrient() {
    if (Math.abs(window.orientation) === 90) {
        //Landscape
        if (iOSDevice != "iPad") {
            $("#apple_ios_status_bar_background").hide();
            $('main')[0].style.height = 'calc(100% - (40px + 20px))';
        }
    } else {
        // Portrait
        $("#apple_ios_status_bar_background").show();
        $('main')[0].style.height = 'calc(100% - (40px + 20px + 20px))';
    }
    webix.ui.resize();
}

window.onorientationchange = ChangeOrient;

$(document).ready(function() {
    var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
    
    if (iOS) {
        $("#apple_ios_status_bar_background").show();
        $('main')[0].style.height = 'calc(100% - (40px + 20px + 20px))';
    } else {
        $("#apple_ios_status_bar_background").hide();
        $('main')[0].style.height = 'calc(100% - (40px + 20px))';
    }
});