Safari-Höhe 100% - element in einem max-height-element

Ich versuche, herauszufinden, warum Safari nicht gelesen das max-height-Attribut des übergeordneten als die Höhe. Chrome und Firefox wird es richtig lese, aber Safari scheint zu ignorieren, die Eltern max-height und stattdessen packt die Seite in voller Höhe.

Können Sie sehen, es hier

CSS:

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

Markup:

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

Ich bin mit Safari 6.0.5 auf OS x 10.8.5.

Wie es scheint, bug zuständig ist. Hier ist auch ein Antwort über. Die einzige Lösung, die für mich gearbeitet wurde das hinzufügen div { position: absolute; }, versuchen Sie es hier.
Perfekt. Trotzdem hasse ich safari 😉 wenn Ihr das als Antwort, ich werde es akzeptieren.

InformationsquelleAutor Chad | 2013-10-01

  1. 19

    Dieses Problem tritt aufgrund eines gemeldeten bug in Webkit:

    Bug 26559 - Wenn ein block die Höhe wird bestimmt durch min-height/max-height, Kinder mit prozentualen Höhen Größe sind falsch

    Scheint dies behoben zu sein für Chrome jetzt durch, aber nicht für Safari.

    Nur die nicht-JavaScript-workaround, der für mich gearbeitet hat, ist mit einem absoluten Positionierung auf dem Eltern-element:

    div {     
    position: absolute;
}

    Demo

    Versuchen Sie bevor Sie kaufen

    Feste Positionierung funktioniert es auch. Danke!
    aber was ist, falls Sie bauen wollen, zwei divs, eines nach dem zweiten? nehmen Sie Ihre HTML und kopieren, dann die kopierte div nach dem orginal. sehen Sie die kopieren?...

    InformationsquelleAutor insertusernamehere

  2. 0

    Ähnliches problem erscheint auf Safari, wenn das übergeordnete element verwendet flexbox Eigenschaften - container nicht 100% der Höhe.
    Eine andere Lösung (neben position: absolute;) wäre, die Nutzung vh (viewport height) Einheiten:

    div {
 height: 100vh;
}

    InformationsquelleAutor Sergey Dubovik

Schreibe einen Kommentar