100% Height and CSS on Mobile

Question

I would be sure that this question was asked earlier, but I could not find anything very similar (the questions were a bit similar)

The trend in mobile browsers is to hide the address bar when scrolling down, which is great, but has problems for websites that are highly dependent on the heights of the percentage-based elements, such as the responsive website I'm doing now.

The problem is that the size of the viewport changes depending on the visibility of the address bar. A value of 100% height is greater if the address bar is invisible than its size when it is visible. This leads to jerky reconfiguration of the website when scrolling. This is especially problematic in mobile Google Chrome, as the address bar returns every time you scroll up, wherever you are on the page. Many jerky reconfigurations.

I want 100% to mean 100% in terms of a browser without an address bar. Whatever the solution, this will require some Javascript, but I cannot find a way to get this information. One option that comes to mind is the height of the screen, but this means that the notification bar of the mobile OS or any other elements of the browser user interface will not be taken into account. Therefore, I assume that the first step, and the next step, is to find the most eloquent way to present this height to all percent-based height elements (I know that all this could be done through Javascript, it would be nice if I could save this minimum, although they do not perform heaps of element adjustments during resize events).

The answers are much appreciated.

Answer 1

I had a similar problem on my website that I solved by hiding the address bar when loading the page and setting elements that I would like to increase by 100% in jQuery. Short answer: I do not think that you can only do this with CSS. Here is my jQuery:

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

Here's jQuery to set 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!

PS - This code should be inside your $ (document) .ready (function () {...});

Oh, also .. It’s important to note that if you scroll all the way to the top, this will cause the address bar to appear again, and temporarily press 100% of the height. I have not yet found a workaround for this, but it worked for what I needed.