Chrome / Safari n'est pas de remplissage de 100% à hauteur de flex parent
Je veux avoir un menu vertical avec une hauteur spécifique.
Chaque enfant doit remplir la hauteur de la mère et de l'avoir moyen-texte aligné.
Le nombre d'enfants est aléatoire, donc je dois travailler avec des valeurs dynamiques.
Div .container
contient un nombre aléatoire d'enfants (.item
) qui ont toujours à remplir la hauteur de la mère. Pour réaliser cela, j'ai utilisé flexbox.
Pour faire des liens avec le texte aligné au milieu, je suis en utilisant display: table-cell
technique. Mais en utilisant le tableau affiche nécessite l'aide d'une hauteur de 100%.
Mon problème est que .item-inner { height: 100% }
ne travaille pas dans webkit (Chrome).
- Est-il un correctif pour ce problème?
- Ou est-il une autre technique pour faire tous les
.item
remplir la hauteur de la mère avec le texte vertical aligné au milieu?
Exemple ici jsFiddle, devraient être considérés dans Firefox et Chrome
CSS:
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
.item {
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
height: 100%;
width: 100%;
display: table;
}
a {
background: orange;
display: table-cell;
vertical-align: middle;
}
HTML:
<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
</div>
- il a maintenant été corrigé - bugs.chromium.org/p/chromium/issues/detail?id=426898
- Ce n'est pas spécifiquement pertinents pour l'OP, mais peut être pertinente pour les googlers qui débarquent ici pour "safari affichage de la hauteur absolue de 100% ne marche pas" ou quelque chose de similaire. J'ai un élément comme ça à l'intérieur d'un conteneur flex et a dû préciser
top:0
etleft:0
pour qu'elle s'affiche comme prévu. - n'a pas été encore fixé: stackoverflow.com/questions/46226298/...
Vous devez vous connecter pour publier un commentaire.
Solution
Imbriquer conteneurs flex.
Se débarrasser de pourcentage hauteurs. Se débarrasser de propriétés de la table. Se débarrasser de
vertical-align
. Éviter de positionnement absolu. Il suffit de coller avec flexbox tout le chemin à travers.Appliquer
display: flex
le flex de l'élément (.item
), faisant d'elle un conteneur flex. Cette règle automatiquementalign-items: stretch
, qui dit à l'enfant (.item-inner
) pour développer la hauteur totale de la mère.Important: Retirez spécifié hauteurs de flex éléments pour que cette méthode fonctionne. Si un enfant a une hauteur spécifiée (par exemple,
height: 100%
), puis il ignore lealign-items: stretch
venant de la mère. Pour lestretch
par défaut de travail, la taille de l'enfant doit calculer pourauto
(explication complète).Essayez ceci (pas de changements de code HTML):
CSS:
HTML:
jsFiddle démo
Explication
Il ne fonctionne pas parce que vous êtes en utilisant le pourcentage de la hauteur dans un sens qui ne sont pas conformes avec la traditionnelle mise en œuvre de la spécification.
En d'autres termes, le pourcentage de la hauteur de travailler sur un flux de l'enfant, le parent doit ont une hauteur donnée.
Dans votre code, le conteneur de niveau supérieur a une hauteur définie:
.container { height: 20em; }
Le troisième niveau de conteneur a une hauteur définie:
.item-inner { height: 100%; }
Mais entre eux, le second conteneur de niveau –
.item
– ne pas ont une hauteur définie. Webkit voit que comme un chaînon manquant..item-inner
dit Chrome: me donnerheight: 100%
. Chrome semble le parent (.item
) pour la référence et répond: 100% de quoi? Je ne vois rien de (en ignorant lesflex: 1
règle qui est là). Par conséquent, il s'appliqueheight: auto
(contenu de la hauteur), en conformité avec la spécification.Firefox, d'autre part, accepte désormais d'un parent flex hauteur comme une référence pour l'enfant pourcentage de la hauteur. IE11 et Bord accepter flex hauteurs, en tant que bien.
Aussi, google Chrome accepter
flex-grow
un bon parent de référence si utilisé en conjonction avecflex-basis
(toute valeur numérique des œuvres (auto
ne va pas), y comprisflex-basis: 0
). De cette écriture, toutefois, cette solution échoue dans Safari.CSS:
HTML:
Quatre Solutions
1. Spécifier une hauteur sur tous les éléments parents
Fiable de la croix-navigateur solution est de spécifier une hauteur sur tous les éléments parents. Cela empêche les liens manquants, qui basé sur Webkit navigateurs considèrent une violation de la spec.
Noter que
min-height
etmax-height
ne sont pas acceptables. Il doit être leheight
propriété.Plus de détails ici: De travail avec le CSS
height
de la propriété et des valeurs en pourcentage2. CSS par rapport & Positionnement Absolu
Appliquer
position: relative
pour le parent etposition: absolute
de l'enfant.La taille de l'enfant avec
height: 100%
etwidth: 100%
, ou utiliser l'offset propriétés:top: 0
,right: 0
,bottom: 0
,left: 0
.Avec le positionnement absolu, le pourcentage de la hauteur des œuvres, sans préciser la hauteur sur le parent.
3. Supprimer les HTML conteneurs (recommandé)
Est-il nécessaire pour les deux récipients autour de
button
? Pourquoi ne pas supprimer.item
ou.item-inner
, ou les deux? Bien quebouton
éléments oublient parfois que des conteneurs flex, ils peuvent être flex éléments. Envisager de fairebutton
un enfant de.container
ou.item
, et retrait gratuit mark-up.Voici un exemple:
CSS:
HTML:
4. Imbriquée Conteneurs Flex (recommandé)
Se débarrasser de pourcentage hauteurs. Se débarrasser de propriétés de la table. Se débarrasser de
vertical-align
. Éviter de positionnement absolu. Il suffit de coller avec flexbox tout le chemin à travers.Appliquer
display: flex
le flex de l'élément (.item
), faisant d'elle un conteneur flex. Cette règle automatiquementalign-items: stretch
, qui dit à l'enfant (.item-inner
) pour développer la hauteur totale de la mère.Important: Retirez spécifié hauteurs de flex éléments pour que cette méthode fonctionne. Si un enfant a une hauteur spécifiée (par exemple,
height: 100%
), puis il ignore lealign-items: stretch
venant de la mère. Pour lestretch
par défaut de travail, la taille de l'enfant doit calculer pourauto
(explication complète).Essayez ceci (pas de changements de code HTML):
CSS:
HTML:
jsFiddle
Solution: Supprimer
height: 100%
dans .l'élément intérieur et ajouterdisplay: flex
dans .élémentDémo: https://codepen.io/tronghiep92/pen/NvzVoo
Pour Mobile Safari Il y a un Navigateur fixer. vous devez ajouter -webkit-box pour les appareils iOS.
Ex.
si vous utilisez
align-items: stretch;
propriété de l'élément parent, retirez leheight : 100%
de l'élément enfant.J'ai eu un problème similaire dans iOS 8, 9 et 10 et les informations ci-dessus ne pouvait pas le réparer, cependant je l'ai fait découvrir à une solution après une journée de travail sur ce sujet. Accordé, il ne fonctionnera pas pour tout le monde mais dans mon cas, mes articles ont été empilés dans une colonne et une a 0 la hauteur, quand il aurait été le contenu de la hauteur. La commutation de la css à la ligne et enveloppez-correction du problème. Cela ne fonctionne que si vous avez un seul élément et ils sont empilés, mais depuis il m'a fallu un jour pour le savoir j'ai pensé que je devais partager mon fix!