18041 sujets

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

Flex stretch

Bonsoir,

je n'arrive pas à faire en sorte que mon main-content prenne la totalité de l'écran sans une barre de scroll apparente.
J'ai fais quelques essai avec height:100%; soit height:100vh; (parent/enfants) mais ça déborde.
Ensuite j'ai utilisé le align-items: flex-stretch; ou align-content: flex-stretch; mais ça ne veut pas fonctionner Smiley bawling .

J'aimerais que le contenu (main-content) soit homogène : 15% environ le header / 80% le wrapper / 5% le footer

je vous laisse le codepen : http://codepen.io/Loic_ROGER/pen/BxBOOe
et une photo de mon problème upload/1523987954-70463-capture.png
Modifié par LOIC_75 (17 Apr 2018 - 19:59)
Essaie :
.main-content { height: 15vh; }
footer { height: 5vh; }
.wrapper { height: calc(100vh - 15vh - 5vh); overflow: auto; }

vh = 1/100 hauteur du viewport
Modérateur
Hello, tu devrais cleaner un peu ton code.
En fait ton code devient trop compliqué et lorsque c'est trop compliqué et bien c'est que ce n'est pas la bonne méthode...

Quand tu fais ce genre de mise en page, essaie de réfléchir à la meilleure structure à avoir, ensuite de mettre en forme l'élément le plus haut de la structure et descendre au fur et à mesure.

Voici pour t'aider un petit essai Smiley cligne . Tu peux voir qu'avec seulement quelques lignes, cela suffit.

Dernière chose, évite autant que possible de jouer avec des positions fixed/absolute. Cela t'évitera beaucoup de problème Smiley smile
Modifié par Yordi (18 Apr 2018 - 08:37)
@bazooka07
Bonjour,

J'ai essayé t'as technique, 

.main-content { height: 15vh; }
footer { height: 5vh; }
.wrapper { height: calc(100vh - 15vh - 5vh); overflow: auto; }


ça fonctionne à moitié lol, j'ai en effet la barre de scroll apparente, ça déborde. J'ai du mal a ajusté pour que ça reste nickel ! Smiley hum Que ça s'adapte sur chaque écran ...
Modifié par LOIC_75 (18 Apr 2018 - 10:41)
@Yordi

Bonjour, Merci de ton retour,
ça à l'air de fonctionner ! Smiley cligne En revanche sur IE, c'est une catastrophe, ça s'étire et rien ne change avec un width:100%;, quel(s) paramètre(s)sur mon code je dois intégrer selon toi pour que j'ai le même rendu que sur chrome par exemple.
En effet ma nav est réduit est si je mets un height:100%; j'ai le scroll apparent ! lol. De même pour le main-content, foutu scroll !.

Voici pour internet explorer un screen :
upload/1524042042-70463-capture2.png


En tout cas tes conseils mon bien été utile, je prends note ! Merci Smiley cligne
Modifié par LOIC_75 (18 Apr 2018 - 11:01)
Modérateur
Ok, sorry je n'ai pas de IE donc je ne sais tester...
On va devoir attendre que quelqu'un d'autre passe pour pouvoir aider Smiley smile
Mais ça doit être une valeur de flex qui n'est pas identique par défaut sur IE. Essaie peut-être 
.main-content{flex: 1 0 0%}
à la place de 
flex-grow: 1;
. Assez difficile à dire sans pouvoir tester Smiley confus
Modérateur
Tu as un super document (qui a été écrit par quelqu'un de plutôt fiable Smiley ravi ) pour pouvoir éviter facilement ce genre de chose...
Modifié par Yordi (18 Apr 2018 - 11:31)
Administrateur
Hello,
LOIC_75 a écrit :
Ensuite j'ai utilisé le align-items: flex-stretch; ou align-content: flex-stretch; mais ça ne veut pas fonctionner Smiley bawling .

Oui en effet car ces valeurs n'existent pas Smiley cligne

Pour la partie IE, il y a une ressource incontournable qu'il faut absolument connaître : https://github.com/philipwalton/flexbugs
D'après ce que je vois en survolant ton code, tu as a priori plusieurs bugs référencés dans cette ressource.

Bon courage !
Sujet clos
Aller à