Hauteur héritée d'un div enfant d'un parent avec un attribut min-height
Je suis désolé si c'est une vieille question ou un problème connu, mais je n'ai pas été capable de trouver une réponse en ligne. Si j'ai le code
<style>
html, body { height: 100%; width: 100%;}
#div1 {height:50%; min-height:200px;background-color:red;}
#div2 {height:100%; background-color:black;}
</style>
<body>
<div id="div1"><div id="div2"></div></div>
</body>
Puis dans firefox, la noire intérieure div se rétrécit comme l'écran se rétrécit et s'arrête à 200px de hauteur. Cependant, dans un navigateur webkit le rouge div extérieure s'arrête, mais l'intérieur div continuer à se rétrécir comme si elle était dans un div parent sans le min-height attribute.
Est-il une solution facile pour apporter de la version de webkit en ligne avec le firefox de rendu? Un min-height:inherit
fonctionne si elle est placée à l'intérieure de la div, mais dans le cas de la plupart des divs dans un délai d'un cela nécessiterait min-height:inherit
sur chaque enfant div. Sont plus là des solutions élégantes?
source d'informationauteur Phil
Vous devez vous connecter pour publier un commentaire.
Oui, c'est une WebKit bug, bug 26559.
height
dans%
statique-ou-relative-les éléments en position est calculée par rapport au bloc contenant déclaréheight
propriété, au lieu de la taille calculée en prenantmin-height
etmax-height
en compte. La même chose ne se produit pas pour la largeur.Vous pouvez sorte de voir d'où cela vient de dans CSS 2.1 qui stipule que la hauteur d'un bloc contenant doit être explicitement définie pour
%
de travail. Mais il n'est pas explicitement déclaré que la "explicitement" signifie! Les navigateurs ont pris cela signifie que leheight
propriété doit être définie à un non-automatique de la valeur, ce qui est assez juste, sauf queheight
n'est pas tout, il est à la hauteur maintenant. Les autres navigateurs permettentmin-height
/max-height
à affecter la hauteur de être utilisés, mais ne la laissez pas à dire ‘explicite’. WebKit va plus loin (et ce n'est certainement pas mandaté par spec) à l'aide de seulementheight
dans le calcation et pas min/max.Comme une solution de contournement, vous pouvez essayer de positionnement absolu, qui n'est pas affectée. Relative-position à l'extérieur de la div, absolu-position à l'intérieur à
left: 0; top: 0; width: 100%; height: 100%
.Je pense que c'est seulement les différences entre les deux par défaut du navigateur CSS. Essayez ceci:
Cela fonctionne pour moi.
Notre projet a besoin de l'image à la verticale et centrée horizontalement. Et nous avons besoin de faire de l'image est ajustée en fonction de la taille de l'écran. Je trouve que le fait de mettre l'image en tant que fond de résoudre le problème:
Ici
50% 50%
rend l'image centrée horizontalement et verticalement. Etbackground-size: contain
assure que le fond ne dépasse pas la limite de la société mère (MDN fond de taille):Seul inconvénient, c'est: l'image sera agrandie pour remplir l'espace parent.
J'ai eu un problème avec min-height sur une div vide dans Chrome (OSX 10.6).
Je ne sais pas si c'est le même bug comportement, mais je trouvé ma solution avec l'évolution de la box-sizing attribut.
Ne fonctionne pas sous google Chrome Mac:
De travail dans google Chrome Mac:
Espère que ça aide.
Je tiens à poster ma solution car il m'a fallu un moment pour faire mon code du travail et peut-être que quelqu'un va trouver cela utile, malgré le fait que c'est un vieux sujet...
J'ai eu un problème similaire de. Une image a été débordant d'un parent flex-enfant du bloc. Cela s'est produit seulement dans le Chrome et Opera navigateurs webkit), trident et gecko ont été assez intelligents pour faire face à la situation. J'ai essayé quelques solutions ici sur stack overflow, mais aucun n'a fourni une solution directe, donc j'ai de la croix-inventé une solution de contournement par l'ajout d'un autre conteneur de couche entre précitées de l'image et du parent. Dans la situation présentée à l'ouverture du post, il devrait ressembler à:
Ce que ce n'est de créer un conteneur (#div_fix) qui reçoit statique de la hauteur et la largeur qui peuvent ensuite être utilisés dans webkit pour calculer la bonne hauteur dans #div2.
Veuillez noter que la position:relative et la position:absolute propriétés sont obligatoires pour que cela fonctionne.
Et oui, il est mauvais, mais fait le travail 🙂