Ucięta część diva kiedy scroll na samym dole w przeglądarce mobilnej Opcje

[swiderek31]

Cześć, jak rozwiązać problem:

mam diva głównego szerokość 100%, wysokość 100vh

w głównym divie są dwa divy - lewy i prawy - mają po 50% szerokości i 100vh wysokości i float (left, right) z tym że lewy ma overflow-y: auto a prawy scroll. Na przeglądarkach komputerów (firefox, chrome, ie, opera) wygląda tak jak zamierzony efekt a na telefonie prawy div po skrolowaniu w dół - jego częśc (spód) jest zasłonięta przez pasem nawigacyjny telefonu.

[swiderek31]

dziękuję trueblue za artykuł i szczególnie to zdanie mi rozjaśniło umysł: "If you opened your browser and started to load a website, 1vh was equal to 1% of your screen height, minus the browser interface. But! If you start scrolling, it’s a different story."

dlatego napisałem taką funkcję

[PHP] pobierz, plaintext 
    function vh_validation() {
 
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
 
            var window_inner_h = $(window).innerHeight();
 
            $("#right").css("height", window_inner_h + "px");
 
        } else {
 
            $("#right").css("height", "100vh");    
 
        }
 
    }
 
    vh_validation()
 
    $(window).on('load scroll resize orientationchange', function(e) {
 
        vh_validation()
 
    });
[PHP] pobierz, plaintext 

Czyli: jak wykryje że przeglądarka jest mobilna to przy ładowaniu strony, scrollowaniu, resizingu i przy zmianie orientacji sprawdza wewnętrzną wysokość okna przeglądarki i dostosowuje wysokość prawego diva. Przetestowane na trzech różnych przeglądarkach w telefonie i 4 na komputerze - wszędzie działa aż miło. Chyba że byście coś dodali albo coś zmienili w kodzie żeby był jeszcze bardziej działający (wiecie o co chodzi (IMG:style_emoticons/default/smile.gif) ).