Imaginez avoir cette situation: une simple mise en page de 3 rangées faite avec FLEXBOX, avec la ligne centrale remplissant tout l'espace disponible. Jolie de choses standard. ici le CSS: (omettant CSS pour les couleurs d'arrière-plan, vous pouvez le deviner). Le problème est que le "contenu" DIV ne pousse pas le pied de page DIV, le garder au bas de la page, comme la position: fixe en bas: 0.
Faire défiler la page Afficher, à l'exception de ce problème, le comportement correct, avec 3 DIV avec une couleur différente de toutes les dimensions 100% de la fenêtre du navigateur. Qu'est-ce qui me manque?
3 Réponses :
Si vous modifiez les 100% en 100vh, ces travaux
.flex-container .content .item {
height: 100vh;
}
Merci@itamar pouvez-vous s'il vous plaît laissez-moi savoir pourquoi ce n'est pas correct CSS sage? Ce n'est pas argumentatif, c'est de m'aider à mieux comprendre.
Vous définissez tous les articles pour prendre 100% de la hauteur de la vue
Au lieu d'étirer les articles sur l'écran existant, comme demandé
Fondamentalement, vous avez trouvé la solution de bande-aide parfaite au lieu de résoudre le vélo cassé :)
Merci Itamar fait un sens parfait :)
Heureux d'aider. J'espère que ma propre réponse sera la bonne pour la puissance
Vous avez donc quelques erreurs ici:
Vous devez avoir 2 composants flexibles:
.flex-conteneur - pour correspondre à la taille de l'écran
-
.flex-conteneur .Content - Pour pouvoir étirer les éléments
Vous devez définir .item sur flex: 1;
Voici une version de travail: https://jsfiddle.net/oj0thmv7/5/
Voici un exemple de travail avec défilement: https://jsfiddle.net/oylbxsrc/
J'ai fini par utiliser JavaScript pour calculer la hauteur pour atteindre ce que je voulais visuellement. Mais merci à vous @itamar, vous m'avez donné des idées intéressantes pour un autre projet.
Serait heureux si vous pouviez ajouter votre solution au poste, pour les recherches futures
Je ne suis pas sûr de ce que vous recherchez. Peut-être que ce sera une aide pour vous.
p>
<div class="container">
<div class="flex-container">
<div class="header">header</div>
<div class="content">
<div class="item red">asdasd</div>
<div class="item yellow">asdasd</div>
<div class="item green">asdasd</div>
</div>
<div class="footer">footer</div>
</div>
<div>
Hauteur: 100% OnCorps ne fera que si vous spécifiez également une hauteur pourHTML . Vous manquez également un point-virgule après les deux premiersHauteur: 100%Corps {Hauteur: 100vh}Code fixe comme @turnip suggéré, le problème reste. J'ai essayé de temps réel
Vous parlez d'un pied de page de position fixe, mais vous n'avez posé aucun CSS pour cela? Et il n'est toujours pas clair ce que vous voulez réaliser ...
Ce que je dis, c'est que le pied de page se comporte comme «position: fixe; bas: 0". Ce que j'essaie de faire est de le pousser en bas, après le "contenu", DIV se termine le défilement
Est-ce ce que vous essayez d'atteindre? jsfiddle.net/ttpslmfca
@Turnip presque. L'en-tête doit faire défiler l'extérieur et je ne peux pas voir le pied de page de votre Jsfiddle
"Je ne peux pas voir le pied de page dans votre jsfiddlle" Assurez-vous que la console ne s'affiche pas (éteignez-la dans les paramètres). "L'en-tête doit faire défiler" ça sonne comme Flex n'est pas la bonne approche. Vous voulez juste un pied de page de position fixe.
Bon sang, je ne connaissais pas la console. Merci!!! Je ne veux rien que rien ne soit fixé, juste le flux régulier. Mais chaque enfant de "contenu" doit être de 100% de hauteur. Si .Item a une valeur px, comme 500, cela fonctionne. Je vais trouver une autre façon que vous le suggérez