javascript - Dynamic height of main block -

on page, there 3 blocks (header, main , footer). 4th (apple_ios_status_bar_background) hidden default , displayed (or hidden) dynamically in code. when unit not displayed, can see 3 blocks on page. if display 4th block - block footer goes down page. necessary block main changed height dynamically (all blocks should visible on page).

code https://jsfiddle.net/j3qm5qgx/1/

in js detect ios system, if true - show apple_ios_status_bar_background block, hide if false.

in fiddle did not include jquery , second did not define ios. if works wanted to.

var ios = (navigator.useragent.match(/(ipad|iphone|ipod)/g) ? true : false); 

https://jsfiddle.net/j3qm5qgx/4/

note safari not mean ios , solve issue in css media device.

if not want footer go offscreen, set on bottom via css:

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

https://jsfiddle.net/j3qm5qgx/5/

another way change jquery, since main 20 pixels more short:

if (ios) {     $("#apple_ios_status_bar_background").show();     $('main')[0].style.height = 'calc(100% - (40px + 20px + 20px))'; } else {     $("#apple_ios_status_bar_background").hide(); } 

https://jsfiddle.net/j3qm5qgx/6/