18010 sujets

Questions générales et questions de débutants

Problème hauteur taille écran % / vh ?

Bonjour,

J'ai un soucis dans mon code, en effet, je n'arrive pas à ce que la class menu et les éléments enfants de la class comble soient ajuster au même niveau, c'est à dire à la taille de l'écran 100% ou en vh ou autre, que dois-je faire svp ? je suis bloqué :'( Merci de bien vouloir m'aider.

Voici le codepen : http://codepen.io/Loic_ROGER/pen/QmBzgy
Modifié par LOIC_75 (04 Apr 2018 - 10:35)
Modérateur
Bonjour,

Pourtant quand j'y regarde, la partie jaune (.menu) et la partie rouge (.comble) s'étendent bien sur toute la hauteur de la zone d'affichage...
Bonjour Greg Lumière,
Exactement, mais pourtant ce qu'il y a à l'intérieur du rouge (.comble)ne s'adapte pas. Je peux mettre des height: 100% sur les éléments enfants mais rien n'y fais ou alors j'ai mal fais un truc ? ;'(
Modifié par LOIC_75 (04 Apr 2018 - 11:39)
Modérateur
Salut,

Normal, ton .comble n'as pas de hauteur. Le min-height n'est pas considéré comme un height. Du coup les enfants font 100% de... on sait pas quoi Smiley lol
Bonjour _laurent,

Je suis tout à fait d'accord, mon .comble n'as pas de hauteur mais j'ai fais en sorte que les éléments enfant soit contenu sans dépasser et prennent tout l'espace de .comble mais rien n'y fais j'ai toujours un écart ! J'ai définis un height:100%; à .comble, les éléments enfants ne prennent pas 100% du .comble, soit ils dépassent, soit ils se recroquevillent même si je force avec un !important et ceux même si je passe sur chaques éléments (header,wrapper,footer).

Honnêtement j'aimerais comprendre quelle balise me pose problème
Modifié par LOIC_75 (04 Apr 2018 - 11:36)
Modérateur
Je comprend pas trop c'est un peu brouillon...

En gros si tu ne donne pas de hauteur a .comble, ses enfants ne pourront pas avoir de hauteur à 100%.

Donc tu as donné une height:100% a .comble. Parfait.

Maintenant si tu dis a ses enfants height:100%; ils vont faire 100% de la hauteur de comble... et comme tu as plusieurs enfant qui se chevauchent... j'ai du mal a voir ou tu veux en venir.... Si wrapper fait 100% de son parent et que tu rajoute le header et le footer en plus ca va forcément dépasser....
Modifié par _laurent (04 Apr 2018 - 11:43)
Modérateur
Ce que tu cherches à faire ne serait-ce pas juste un:


.comble {
  display: flex;
  flex-direction: column;
}
#navigation {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}


ps: https://codepen.io/anon/pen/zWLXEP
Modifié par kustolovic (04 Apr 2018 - 11:54)
Meilleure solution
_laurent,

merci de ton retour, en effet c'est un peu brouillon... et tiré par les cheveux.

Donc j'ai donné une height:100% a .comble. jusque la Parfait.
(étape par étape)
Mais concernant les enfants,ils se chevauchent, j'enlève à header/wrapper/footer le height:100%, ça dépasse ! Ensuite j'essaye de leur définir une taille même petite en px/%ou vh En gros je ne définis aucune taille ou une petite taille pour chaques enfants ça dépasse. Smiley hum
Modifié par LOIC_75 (04 Apr 2018 - 12:00)
Bonjour kustolovic,

ce que je cherche à faire c'est tout "simple" (pas pour moi lol) :

Je veux que mon MENU et mon COMBLE soit à la même hauteur écran, sans qu'il ne bouge en full screen (pas de responsive pour le moment). Et dans mon COMBLE, je veux que les éléments enfants ne sortent pas de COMBLE mais s'adapte également à 100% de COMBLE.

Mon problème : les éléments enfants ne veulent pas s'adapter mais prennent soit trop de place soit pas assez ...
Réponse à tous et surtout à kustolovic !

INCROYABLE ! ça à l'air de fonctionner ! Je n'avais pas pensé à faire un
justify-content: space-around;

Petit bémol, ça ne fonctionne pas sur IE11, mais c'est déjà bien, en revanche pour les autres navigateurs ça m'a l'air bon.

En tout cas merci pour vos réponses, je peux avancer Smiley cligne
Modifié par LOIC_75 (04 Apr 2018 - 12:36)
Sujet clos
Aller à