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

cross-browser css

22

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 prenant min-height et max-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 le height propriété doit être définie à un non-automatique de la valeur, ce qui est assez juste, sauf que height n'est pas tout, il est à la hauteur maintenant. Les autres navigateurs permettent min-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 seulement height 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:

<style>
    div {min-height: inherit;}
    #div1 {height:50%; min-height:200px;background-color:red;}
    #div2 {height:100%; background-color:black;}
</style>

Cela fonctionne pour moi.

1

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:
```
<style>
    .parent {
        height: 100%;
    }
    .image {
        height: 100%;
        background: url('/path/to/your/image') no-repeat 50% 50%;
        -o-background-size: contain;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        background-size: contain;
    }
</style>
<div class="parent">
    <div class="image"></div>
</div>
```
Ici 50% 50% rend l'image centrée horizontalement et verticalement. Et background-size: contain assure que le fond ne dépasse pas la limite de la société mère (MDN fond de taille):

contenir Ce mot clé indique que l'image d'arrière-plan doit être
mise à l'échelle pour être aussi grand que possible, tout en veillant à la fois ses dimensions
sont égales ou inférieures aux dimensions correspondantes de la
arrière-plan de zone de positionnement.

De cette façon, le parent n'a pas besoin de spécifier les unités absolues. Ici
height: 100% est assez.

Seul inconvénient, c'est: l'image sera agrandie pour remplir l'espace parent.
0

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:
```
box-sizing:border-box;
min-height:10px;
padding-bottom:15px;
padding-top:30px;
```
De travail dans google Chrome Mac:
```
box-sizing:content-box;
min-height:10px;
padding-bottom:15px;
padding-top:30px;
```
Espère que ça aide.
0

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 à:
```
<style>
    html, body { height: 100%; width: 100%;}
    #div1 {height:50%; min-height:200px;background-color:red; position: relative;}
    #div_fix {position: absolute; height: 100%; width: 100%;}
    #div2 {height:100%; background-color:black;}
</style>
<body>
<div id="div1"><div id="div_fix"><div id="div2"></div></div></div>
</body>
```
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 🙂

Vous devez vous connecter pour publier un commentaire.