Safari hauteur de 100% de l'élément à l'intérieur d'un max de hauteur de l'élément

Je suis à essayer de comprendre pourquoi Safari ne sera pas lire le max-attribut hauteur de sa société mère à la hauteur. Chrome et Firefox de le lire correctement, mais Safari semble ignorer le parent max-hauteur et au lieu saisit la page est pleine hauteur.

Vous pouvez le voir, il ici

CSS:

body, html {
    height: 100%;
    margin: 0;
}
div {
    height: 100%;
    max-height: 300px;
    width: 100px;
}
div span {
    background: #f0f;
    display: block;
    height: 100%;
}

Balisage:

<div>
    <span></span>
</div>

Je suis à l'aide de Safari 6.0.5 sur OSX 10.8.5.

  • Il semble que ce bogue est responsable. Voici aussi un répondre à ce sujet. La seule solution qui a fonctionné pour moi a été l'ajout d' div { position: absolute; }, essayer ici.
  • Parfait. Je les déteste safari 😉 si vous avez mis que comme une réponse, je vais l'accepter.
InformationsquelleAutor Chad | 2013-10-01
  1. 20

    Ce problème se produit en raison d'un rapport de bogue dans Webkit:

    Bug 26559 - Lorsqu'un bloc de hauteur est déterminée par min-hauteur/max-height, les enfants avec un pourcentage hauteurs sont de taille incorrecte

    Cela semble être fixe pour Chrome, mais pas pour Safari.

    Le seul non-JavaScript solution qui a fonctionné pour moi, est à l'aide d'un positionnement absolu sur l'élément parent:

    div {     
    position: absolute;
}

    Démo

    Essayez avant d'acheter

    • Correction du positionnement des œuvres, trop. Merci!
    • mais qu'en cas vous souhaitez construire deux divs un après la seconde? prenez votre HTML et copiez-le, puis mettez le copié div après l'original. pouvez-vous voir la copie?...
    InformationsquelleAutor insertusernamehere
  2. 3

    Problème similaire apparaît sur Safari si l'élément parent utilise flexbox propriétés - conteneur de ne pas prendre 100% de la hauteur.
    Une autre solution (en plus de position: absolute;) serait d'utiliser vh (fenêtre d'affichage de la hauteur) unités:

    div {
 height: 100vh;
}
    • J'ai passé des heures à la recherche de cette solution... a fonctionné comme un charme! Le positionnement absolu n'a pas de travail, mais le réglage de la hauteur de la div immédiatement à l'intérieur de la div avec display: flex travaillé!
    InformationsquelleAutor Sergey Dubovik