A Javascript fix for the 100vh problem on mobile screens

Hi dev.to!

I'm a software development student at Developers Institute NZ, and this is my first public post. 🎉

I figured this would be the perfect place to share a slightly obscure fix that has helped me recently. A few weeks ago, my boss at the lovely cafe I work at on the weekends asked me if I'd be willing to take on some extra hours at work to help with their new landing page. I agreed, however, the brief turned out to be a little trickier than I'd first anticipated! My boss (who is also a graphic designer) had created a gorgeous, eye-catching full-page design. However, it only really works if the entire page is displayed on load, with no scroll bars.

My first thought was to just make everything 100vh. However, of course it's never that simple - as I'm sure many people would have come across, 100vh is not always... 100vh. On some mobile browsers, most commonly Chrome and Safari on iOS, 100vh actually refers to outerHeight. This means the lower toolbar on the browser will not be taken into account, cutting off the last couple of rems of your design. While you can account for the difference using CSS, the view height will subsequently change as soon as the user starts scrolling down and the lower browser toolbar disappears.

(An interesting fact I found while researching this is that this behaviour is completely intentional! Have a look at this blog from 2015 if you're interested.)

While this isn't really an issue for most websites, there are a few different threads on the topic floating around. Unfortunately, CSS fill-available wasn't working for me. The most interesting solution I found was this comment buried in a thread in Elementor's Github repo. It uses Javascript to get innerHeight and assign it to the min-height CSS property for the outer container of the design. In order to change the innerHeight when the user starts scrolling and the browser toolbars shrink, we use an event listener. This worked perfectly for the design of the cafe's landing page.

Here is the solution I used, adapted from that comment:

// define a function that sets min-height of my-element to window.innerHeight:

const setHeight = () => {
    document.getElementById("my-element").style.minHeight = window.innerHeight + "px"
};

// define mobile screen size:

let deviceWidth = window.matchMedia("(max-width: 1024px)");

if (deviceWidth.matches) {
// set an event listener that detects when innerHeight changes:

    window.addEventListener("resize", setHeight);

// call the function once to set initial height:

    setHeight();
}

If you're using Wordpress (which I was), the easiest way to insert this is to wrap it in a script tag and add it into an HTML component underneath ALL other content, and then remove all padding from it so no white space is visible. Depending on your design, theme, and plugins, you may also need to add more lines to the function to include any containers for which you'd usually need to re-state the 100vh rule, for example perhaps .elementor-container and .elementor-widget-wrap if you're using Elementor.

While this is not the cheapest solution due to the event listener, it was exactly what I needed for this particular project. Hope someone else finds it useful or interesting! 👋