Date: 2020jul15
Update: 2025jul14
Language: javaScript
Q. jQuery: Chrome changes the height but doesn't update vh
This occurs when Chrome shows the address bar (to the user) which takes
up vertical space.
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/