100% height and CSS on mobile

Question

I would be certain that this question has been asked before, but I couldn't find anything very similar (there were questions slightly similar)

A trend in mobile browsers is to hide the address bar as you scroll down, which is great, but has problems for websites that are heavily dependent on percentage based element heights, like the responsive website I'm making now.

The problem is, the viewport size changes depending on the visibility of the address bar. Meaning, 100% height is bigger when the address bar is invisible than the size of it when it is visible. This results in a jerky reconfiguration of the website when you scroll. This is especially problematic on mobile Google Chrome as the address bar comes back whenever you scroll up wherever you are in the page. Lots of jerky reconfigurations.

I want 100% to mean 100% in terms of the browser without the address bar. Whatever solution I take, it will require some Javascript but I can't seem to find a way to get this information. One option that comes to mind is screen height, but that means the notification bar of the mobile OS or any other permanent browser UI elements will not be taken into account. So I guess that's the first step, and the next step is finding the most eloquent way to introduce this height to all of the percentage based height elements (I know it could all be done through Javascript, would be nice if I could keep that to a minimum though and not do heaps of element readjustment on resize events).

Answers are very much appreciated.

Answer 1

I had a similar problem on my website, that I solved by hiding the address bar on page load, and setting the elements that I wanted to be 100% height in jQuery. Short answer, is that I don't think you can do it with CSS alone. Here's my jQuery:

// When ready...
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});

Here's the jQuery for setting 100% height:

// Set the height of the element
$('#selector').css('height', $(window).height());

    // Continuously set the height of the window when screen resizes
    $(window).resize(function() {
        var theHeight = $(window).height();
        $('#selector').css('height', theHeight);
});

Hope this was helpful!

P.S - That code needs to be inside your $(document).ready(function(){ ... });

Oh, also.. it's important to note, that if you scroll all the way to the top, it will make the address bar show again, and push the 100% height stuff down temporarily. I haven't found a workaround for this yet, but it worked for what I needed it for.