Trying to create a full-height intro section using basic JavaScript markup has been quite the challenge.
Here's a more detailed explanation:
I have a parent DIV element that is supposed to adjust to the full height of the viewport. Unfortunately, the CSS "height: 100vh" is not working due to mobile incompatibility issues. So I've resorted to this code. It was working perfectly fine until recently when it suddenly stopped functioning properly in Chrome overnight! The height calculations are now incorrect.
I've included my code and some screenshots for reference.
I'm confident that you can assist me with this issue.
Thank you in advance
Sample that works
Chrome bug
$(document).ready(function(){
'use strict';
setInterval( function() {
var windowHeight = $(window).height();
var containerHeight = $("#intro-wrapper > .inner").height();
var navHeight = $("header#main").outerHeight(true);
var border = 20;
var padTop = windowHeight - 20 - (containerHeight+navHeight);
$("#intro-wrapper > .inner").css ({
'padding-top': Math.round(padTop / 2) + 'px',
'padding-bottom': ((padTop / 2)- border) + 'px',
'margin-bottom': border + 'px'
});
}, 0);
});