Je suis désolé si c'est une question ancienne ou un problème connu, mais je n'ai pas pu trouver une réponse en ligne. Si j'ai le code puis dans Firefox, la div intérieure div se rétrécit lorsque l'écran se rétrécit et s'arrête à la hauteur de 200px. Toutefois, dans un navigateur WebKit, le rouge de la Div Red s'arrête, mais l'intérieur div continue à se contracter comme s'il était dans un parent div sans l'attribut min-hauteur. est là une solution facile à apporter la version webkit dans ligne avec le rendu Firefox? A min-hauteur: hériter fonctionne s'il est placé sur la DIV intérieure, mais dans le cas de nombreuses divs dans une partie, cela nécessiterait min-hauteur: hériter sur chaque enfant div. Y a-t-il des solutions plus élégantes?
5 Réponses :
Je pense que ce n'est que les différences entre le CSS par défaut de deux navigateur. Essayez ceci:
<style>
div {min-height: inherit;}
#div1 {height:50%; min-height:200px;background-color:red;}
#div2 {height:100%; background-color:black;}
</style>
Oui qui fera le tour. Si vous utilisez des balises de span et autres, vous pouvez utiliser # div1 * {min-hauteur: hériter} à la place. Merci pour la réponse - c'est un meilleur correctif que le mien était!
Oui, il s'agit d'un bug de webkit, bug 26559 .
Vous pouvez voir où cela vient d'où cela vient dans CSS 2.1 qui indique que la hauteur d'un bloc contenant doit être explicitement définie pour que En tant que solution de contournement, vous pouvez essayer un positionnement absolu, ce qui n'est pas affecté. Positionnement relativement de la DIV extérieure, Position absolue L'intérieur à hauteur dans % sur des éléments positionnés statiques ou relatifs est calculé par rapport à la propriété de la hauteur de la hauteur , au lieu de la propriété. Prise de hauteur calculée min-hauteur et max-hauteur en compte. La même chose ne se produit pas pour la largeur.
% fonctionne. Mais ce n'est pas explicitement indiqué ce que "explicitement" signifie! Les navigateurs ont pris cela pour dire que la propriété Hauteur doit être définie sur une valeur non automatique, qui est assez juste, à l'exception de la hauteur n'est pas tout ce qu'il y a à la hauteur maintenant . D'autres navigateurs autorisent min-hauteur / max-hauteur pour affecter la hauteur à utiliser, mais ne le permettez pas de dire "explicite". WebKit va plus loin (et cela n'est certainement pas mandaté par SPEC) en utilisant seul hauteur dans la calcation et non min / max.
à gauche: 0; TOP: 0; largeur: 100%; Hauteur: 100% .
Merci pour la réponse, c'est la première fois que j'ai trouvé Firefox et le rendu de Webkit diffèrent et cela me conduisait au mur.
+1 pour mentionner la spécification CSS; Cela efface les problèmes pour moi. Fait intéressant, si vous spécifiez la hauteur de l'enfant comme min-hauteur: 100% plutôt que hauteur: 100% , cela fonctionne - mais uniquement dans l'opéra. À mon avis, cela devrait être le comportement approprié, mais pas le cas, selon la spécification. Peut-être que quelqu'un devrait déposer un bug contre la spécification :)
J'ai eu un problème avec min-hauteur sur une DIV vide en chrome (OSX 10.6).
Je ne sais pas si c'est le même comportement de bugs, mais je Travailler en chrome Mac: espère que cela aide.
J'aimerais poster ma solution car il m'a fallu un moment pour faire de mon travail de code et que quelqu'un trouvera peut-être que cela trouvera cela malgré le fait que c'est un ancien sujet ...
J'ai eu un problème de simillar. Une image débordant d'un bloc de parent flex-enfant. Cela ne s'est produit que dans Chrome et Opera (navigateurs WebKit), Trident et Gecko étaient suffisamment intelligents pour faire face à la situation. J'ai essayé quelques solutions ici sur le débordement de la pile, mais aucune n'a fourni une solution directe, j'ai donc une solution de contournement en ajoutant une autre couche de conteneur entre une image et des parents susmentionnés. Dans la situation présentée au poste d'ouverture, il ressemblerait à: Qu'est-ce que c'est créer un conteneur (#div_fix) qui reçoit une hauteur et une largeur statiques qui peuvent ensuite être correctement Utilisé dans WebKit pour calculer la hauteur correcte dans # div2.
Veuillez noter que la position: relative et position: les propriétés absolues sont obligatoires pour qu'il fonctionne. et oui, il a l'air mauvais, mais obtient le travail effectué :)
Notre projet a besoin de l'image pour être centrée verticalement et horizontalement. Et nous devons rendre l'image ajustée en fonction de la taille de l'écran. Je trouve que mettre l'image en tant que fond résolvez le problème: ici De cette manière, le parent n'a pas besoin de spécifier des unités absolues. Ici
Un inconvénient est: l'image sera agrandie pour remplir l'espace parent. 50% 50% rend l'image horizontalement et verticalement centrée verticalement. Et Taille de l'arrière-plan: contenir garantit que l'arrière-plan ne dépasse pas la limite du parent ( MDN Fond-Taille ):
Hauteur: 100% suffit.