28106 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
J'ai un problème sur mobile :

upload/1620507766-82357-image02.jpg

Enfaite, j'ai un min-height: 100vh; sur mon body et un flex: 1; sur mon #bloc_page.
J'ai lu sur un forum américain que 100vh sur mobile était enfaite plus grand que 100vh normaux. Du coup, mon #bloc_page est beaucoup trop grand, et ma page se croll.
Si je fais min-height: calc(100vh - 4.85rem); alors je n'ai plus de problème.
Mais je crois que 4.85rem est la taille de mon footer, mais je ne veux pas chercher sa taille à chaque modification...
Mon body est aussi en display: flex; et en flex-direction: column;
Merci
Modifié par Louis_9876 (08 May 2021 - 23:03)
Administrateur
Hello,

Oui c'est un comportement connu qui n'est pas un bug mais intentionnel : https://bugs.webkit.org/show_bug.cgi?id=141832#c5

Tu peux régler le souci sur la plupart des navigateurs avec la valeur `-webkit-fill-available` : https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/

Si ça ne suffit pas, il faudra calculer la hauteur dynamiquement en JavaScript avec window.innerHeight : https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Bon courage !

PS : pour info, `-webkit-fill-available` est une version temporaire, non finalisée, de la future valeur `fill` : https://googlechrome.github.io/samples/css-intrinsic-sizing/
Modifié par Raphael (09 May 2021 - 11:14)
Meilleure solution