Combler les espaces verticaux avec CSS à l'aide de display:flex
Dans une ligne de 3 mise en page:
- le haut de la ligne doit être dimensionné en fonction de son contenu
- le bas de ligne doit avoir une hauteur fixe en pixels
- la rangée du milieu doit se développer pour remplir le conteneur
Le problème est que, comme le contenu principal se développe, il squishes l'en-tête et pied de page lignes:
HTML:
<section>
<header>
header: sized to content
<br>(but is it really?)
</header>
<div>
main content: fills remaining space<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
<!-- uncomment to see it break - ->
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
<!-- -->
</div>
<footer>
footer: fixed height in px
</footer>
</section>
CSS:
section {
display: flex;
flex-flow: column;
align-items: stretch;
height: 300px;
}
header {
flex: 0 1 auto;
background: tomato;
}
div {
flex: 1 1 auto;
background: gold;
overflow: auto;
}
footer {
flex: 0 1 60px;
background: lightgreen;
/* fixes the footer: min-height: 60px; */
}
Violon:
- http://jsfiddle.net/7yLFL/1/ (de travail, avec la petite teneur)
- http://jsfiddle.net/7yLFL/ (cassé, avec plus de contenu)
Je suis dans la situation de la chance que je peux utiliser la dernière et la plus grande dans le CSS, ignorant les anciens navigateurs. Je pensais que je pouvais utiliser le flex de mise en page pour enfin se débarrasser de l'ancienne table à base de modèles. Pour une raison quelconque, il ne fait pas ce que je veux...
Pour l'enregistrement, il y a beaucoup de questions connexes AINSI à propos de "remplir le reste de la hauteur", mais rien de ce qui résout le problème, je vais avoir du flex. Réf:
- Faire un div remplir la hauteur du reste de l'espace à l'écran
- Combler les espaces verticaux uniquement CSS
- Avoir un div pour remplir le reste de la hauteur/largeur du conteneur lorsque le partager avec un autre div?
- Faire imbriquée div extensible à 100% de rester div conteneur hauteur
- Comment puis-je faire mon flexbox disposition de prendre 100% de l'espace vertical?
- etc
- Semble fonctionner comme prévu sur le violon.
- Oui, il faut décommenter le reste de la <div>'s de contenu pour voir comment il se casse. Je devrais peut-être lié à la version cassé. Désolé.
- J'ai ajouté les deux versions de la question maintenant.
- Je vois ce que tu veux dire maintenant.
- dup de stackoverflow.com/questions/90178/...?
Vous devez vous connecter pour publier un commentaire.
Faire simple : DÉMO
CSS:
HTML:
flex:
abréviation des valeurs par défaut. Je vous remercie.div
. Techniquement, lediv
va passé lefooter
flex: 1
àflex-grow: 1
. Merci pour la solution!flex:1
. Aucune raison de le changer pour 2? Aussi, vous avez supprimé quelques précieux commentaires de la css de l'OMIL'exemple ci-dessous comprend le défilement de comportement si le contenu de l'étendue de la centre composant s'étend au-delà de ses limites. Aussi le centre de la composante prend 100% de l'espace restant dans la fenêtre d'affichage.
jsfiddle ici
Exemple de code html qui peut être utilisé pour illustrer ce comportement
html
à partir du sélecteur et appylingheight: 100vh
àbody
en particulier: jsfiddle.net/pm6nqcqh/1Une approche plus moderne serait l'utilisation de la grille de la propriété.
CSS:
HTML: