Date: 2020jul15
Language: javaScript
Q. jQuery: Chrome changes the height but doesn't update vh
This occurs when Chrome shows the address bar (to the user).
A. This means you can't reliably use 100vh to mean full screen.
CSS:
#main-flex {
height: 100vh; /* Sadly, not reliable */
min-height: 100vh;
display: flex;
flex-direction: column;
}
So I made some javaScript to adjust things:
function setHeight() {
const height = $(window).height();
const hpx = height + 'px';
$('#main-flex').css({height:hpx, 'min-height':hpx});
}
$(document).ready(function() {
setHeight();
$(window).resize(setHeight);
});
After I figured all this out I found another nice article on this
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/