Problem sa "height: 100vh" na mobilnim uređajima

Programiranje
1

Pozdrav, da li se nekad događalo da vam height: 100vh ne radi dobro u browserima na mobilnim uređajima?

Napravio sam neku malu aplikaciju za kalkulaciju plate u firmi gdje trenutno radim (učim JS samostalno u slobodno vrijeme), međutim iritira me to što kada posjetim https://kalkulator-plate.netlify.app na mobilnim uređajima ima scroll, nije fiksirana visina i korisnik mora da skrola da bi vidio dugme “Izračunaj”.

Pokušao sam da guglam i u većini slučajeva ljudi to riješe sa window.innerHeight u JavaScriptu, i taj innerHeight postave kao height containera aplikacije.
I to mi ne funkcioniše.

Probao sam i da stavim za container da je position: fixed; top: 0; bottom: 0; ali i to ne funkcionise.
Ima li neko ideju?

Problem mi vjv pravi taj gore url bar.

2

stackoverflow je zakon!

1 Like
3

Inace se dobro prikazuje na Mi Browser-u, ovaj koji dodje instaliran na Xiaomi telefonu.

1 Like
4

A pogledaj kako je u Chrome kada stavim height: 100% kako pise na stackoverflowu.

Screenshot_20220816-171336_Chrome
Screenshot_20220816-171336_Chrome1080×2340 173 KB

5

Ne znam da li si resio, ali problem je u tome sto si stavio div result koji ti je skriven, ali iako je skriven to je block element koji ti uzima prostor cak i kad ga ne vidis.

Sadrzaj je deformisan i na Mozzili, razlog je zato sto 100vh ne znaci

Koliko vidim ti si napravio te div elemente pa samo dodao event listener i if petlju da ti pomera po osi Y.

Pokusaj da razmisljas u sledecem pravcu:

  • mozes da koristis append child u JS umesto pisanja praznog diva u html.
  • Mozes da koristis css elemete u JS da sa njima regulises html kod.

HTML atributi ce uvek da zauzimaju prostor osim ako im ne dodelis display: none.

2 Likeova
6

Hvala ti na odgovoru. Drago mi je kada mi tako neko da savjete koji će mi pomoći da postanem bolji u ovom poslu.