Programming Tips - jQuery: Chrome changes the height but doesn't update vh

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/