css vh sous téléphone

Sujet résolu

15 novembre 2018 à 10:45:16

Bonjour à tous,

Pour mon site j'utilise la propriété vh pour avoir tout sur 100% de la hauteur de l'écran :

<div class="page">
     <div id="header">
          MON HEADER
     </div>
     <div class="container">
	<?= $content ?>
     </div>

<div id="footer">
                    MON FOOTER
         </div>

.page {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

.container {
		flex: 1;
	}

De cette façon tout est bien sur la taille de l'écran sans scroll.
Sur pc tout marche bien, mais sur mobile non ... entre le bloc principal (container) et mon footer, il y a énormément d'espace., et mon footer est en dessous de ces '100%', il faut scroller pour le voir alors qu'il n'y a rien au dessus.
J'ai trouvé quelques sujets qui précisaient qu"il fallait mettre dans le body margin et padding à 0 pour corriger le soucis, mais rien ne fonctionne de mon côté.

-
Edité par yggdrasil83 15 novembre 2018 à 10:47:20

Frogweb

15 novembre 2018 à 10:51:46

Salut,

ça ne va pas régler ton problème mais je vais faire une remarque.
Pourquoi ne pas utiliser les bonnes balises pour tes header, footer et aussi pour container qui a tout à fait l'air d'un main ?

Maintenant pour ton problème, tu mets min-height donc au minimum ça fait 100vh mais du coup rien ne l'empêche de faire plus.

PS : pour body un margin:0 suffit, body n'a pas de padding.

-
Edité par Frogweb 15 novembre 2018 à 10:53:53

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

yggdrasil83

15 novembre 2018 à 11:02:57

Pour les balises en effet c'est mieux ... Ca fait un moment j'avais pas fait de sites j'avais oublié leurs existance merci je vais changer ça !

Oui ça ne l'empêche pas de faire plus, mais je comprend pas pourquoi il fait plus justement, vu qu'il n y a que du vide ...

Je vous donne un exemple ça sera peut etre plus parlant : https://www.airquinze.com/rubrique_2.php

Bon la c'est pas encore totalement remplit donc même sur pc ça reste un peu vide, mais sous mobile le footer passe sous la hauteur total de l'écran, alors qu'il n y a aucunes raisons pour ? Entre le texte et le footer il y a du vide d'accord, mais pourquoi fait-il scroller pour atteindre le footer ?

Frogweb

15 novembre 2018 à 11:21:37

Si tu enlève les height de footer et header ça arrange les choses ?
Pour footer de toutes façons il faudra l'enlever, dès que tu passe sur tablette il n'est plus assez haut pour que tout rentre dedans.

PS : je vois que tu as mis des width:100% un peu partout, c'est une mauvaise pratique.
https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

pipelette13

15 novembre 2018 à 11:41:00

Bonjour,

En plus des points relevés par mon VDD, as-tu aussi déclaré un "viewport" dans ton <head> qui correspond à tes besoins ? Par contre oui tes width 100 % vont te complexifier la mise en page...

https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

-
Edité par pipelette13 15 novembre 2018 à 11:43:27

Stéphanie, blonde mais je me débrouille (....?) ** Mon sondage: mode Dark VS mode Clean

yggdrasil83

15 novembre 2018 à 12:36:54

En virant la taille du header et footer, ça remonte un peu mais pas totalement.
Pour le width 100% je ne savais pas merci, j'essaierais de rendre plus propre tout ça alors ! merci pour ce genre de retour ça m'aide à coder un peu plus proprement haha.

Non je n'ai pas déclaré de viewport ça peut venir de la ? J'ai jamais touché à ça je regarde comment ça fonctionne.

edit : avec viewport pour le moment je trouve ça pas mal, merci !

-
Edité par yggdrasil83 15 novembre 2018 à 13:20:18

yggdrasil83

17 novembre 2018 à 10:35:16

Bonjour,
Je reviens sur ce sujet car à nouveau un soucis ..

Le viewport avait réglé mon soucis, j'avais testé sous téléphone ça zoomait comme il faut, mais la je viens d'y retourner et il n'y a plus aucuns zoom ...

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Je ne pense rien avoir touché qui puisse poser soucis à ce niveau la et je ne comprend pas pourquoi ça ne marche plus ?

edit : Au final désolé tout est bon je suis stupide mon navigateur était sous 'version pour ordinateur' donc forcément ...

-
Edité par yggdrasil83 17 novembre 2018 à 10:41:10

pipelette13

17 novembre 2018 à 11:34:41

Même pas un +1 pour conseiller le viewport snifff... , j'ai vais mettre mon gilet jaune moi aussi

Stéphanie, blonde mais je me débrouille (....?) ** Mon sondage: mode Dark VS mode Clean

yggdrasil83

17 novembre 2018 à 13:45:19

Désolé, j'ai pas l'habitude de ce système ! C'est fait, et encore merci beaucoup

pipelette13

17 novembre 2018 à 15:04:58

C'était une boutade, je me moque des +1

Bonne continuation

Stéphanie, blonde mais je me débrouille (....?) ** Mon sondage: mode Dark VS mode Clean