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.

[trueblue]

Fajnie, ale w artykule jest dużo prościej:

Tak stylujesz element:

[HTML] pobierz, plaintext 
.my-element {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
[HTML] pobierz, plaintext 

A tak ustawiasz wartość zmiennej --vh przy DOMContentLoaded, load, resize, orientationchage:

[HTML] pobierz, plaintext 
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
[HTML] pobierz, plaintext