Die geerbte Höhe eines Kindes von einem übergeordneten div mit min-height-Attribut

Tut mir Leid, wenn dies ist ein altes Thema, oder ein bekanntes problem, aber ich habe nicht in der Lage, eine Antwort zu finden online. Wenn ich den 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>

Dann im firefox die schwarze innere div wird verkleinert, da der Bildschirm schrumpft und hält an 200px Höhe. Jedoch in einem webkit-browser mit dem roten äußeren div-hält aber die inneren div-weiter schrumpfen, als ob es in einem übergeordneten div, ohne die min-height-Attribut.

Ist es, eine einfache Lösung zu bringen, die webkit-version in Einklang mit der firefox-rendering? Ein min-height:inherit funktioniert, wenn Sie auf dem inneren div, aber bei vielen divs innerhalb eines dies würde erfordern min-height:inherit auf jedes Kind div. Gibt es elegantere Lösungen?

InformationsquelleAutor Phil | 2010-09-27

  1. 22

    Ja, das ist ein WebKit-bug, bug 26559.

    height im % auf statische-oder-relative-positionierten Elementen berechnet wird, relativ zu dem mit block erklärte height - Eigenschaft, anstelle der berechneten Höhe der Einnahme min-height und max-height berücksichtigt. Das gleiche tritt nicht für die Breite.

    Können Sie sehen, wo dies kommt in CSS 2.1, die besagt, dass die Höhe des umschließenden Blocks explizit festgelegt, um für % zu arbeiten. Aber es ist nicht explizit gesagt, was "explizit" bedeutet! Browser haben diese zu bedeuten, dass die height Eigenschaft muss eine nicht-auto-Wert, das ist fair genug, außer dass height ist nicht alles, es ist die Höhe jetzt. Andere Browser erlauben min-height/max-height Einfluss auf die Höhe verwendet werden, aber nicht zulassen, das es bedeutet 'explicit'. WebKit geht weiter (und das ist definitiv nicht vorgeschrieben spec) mit nur height im calcation und nicht min/max.

    Als workaround könnten Sie versuchen, die absolute Positionierung, die gar nicht betroffen ist. Relative-position, der äußeren div -, absolute-position der inneren an left: 0; top: 0; width: 100%; height: 100%.

    Danke für die Antwort, es ist das erste mal, dass ich gefunden habe firefox und webkit-rendering zu unterscheiden, und es war driving me up the wall.
    +1 für die Erwähnung der CSS-Spezifikation; das klärt die Fragen, für mich. Interessanterweise, wenn Sie angeben, die Größe des Kindes als min-height: 100% eher als height: 100% es funktioniert-aber nur in der Oper. Meiner Meinung nach sollte dies das richtige Verhalten, aber nicht so, laut spec. Vielleicht sollte jemand einen Fehler gegen die spec 🙂

    InformationsquelleAutor bobince

  2. 3

    Ich denke, es ist nur der Unterschied zwischen den beiden browser die Standard-CSS. Versuchen Sie dies:

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

    Es funktioniert für mich.

    Yep, werde den trick tun. Wenn Sie mit span-Tag und andere tags, die Sie verwenden können #div1 * {min-height: inherit} statt. Danke für die Antwort - es ist besser beheben als meins war!

    InformationsquelleAutor Adam Wallner

  3. 1

    Unser Projekt braucht das Bild vertikal und horizontal zentriert. Und wir brauchen Sie, um das Bild angepasst an die Bildschirmgröße. Ich finde, dass setzen Sie das Bild als hintergrund und das Problem lösen:

    <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>

    Hier 50% 50% macht das Bild horizontal und vertikal zentriert. Und background-size: contain sorgt dafür, dass der hintergrund nicht überschreitet, die Grenze der übergeordneten (MDN-background-size):

    enthalten Dieses Schlüsselwort gibt an, dass das der hintergrund sein sollte
    skaliert, um möglichst groß sein, während, um sowohl seine Abmessungen
    sind gleich oder kleiner als die entsprechenden Abmessungen der
    hintergrund Aufstellfläche.

    In dieser Art und Weise, die Eltern nicht angeben muss absolute Einheiten. Hier
    height: 100% ist genug.

    Ein Nachteil ist: das Bild wird vergrößert, füllen sich in den übergeordneten Raum.

    InformationsquelleAutor Joy

  4. 0

    Hatte ich ein Problem mit min-height auf ein leeres div in Chrom (OSX 10.6).
    Ich weiß nicht, ob es der selbe Fehler-Verhalten, aber ich fand meine Lösung mit dem ändern der box-sizing Attribut.

    Funktioniert nicht in Chrome Mac:

    box-sizing:border-box;
min-height:10px;
padding-bottom:15px;
padding-top:30px;

    Arbeiten in Chrome Mac:

    box-sizing:content-box;
min-height:10px;
padding-bottom:15px;
padding-top:30px;

    Hoffe, das hilft.

    InformationsquelleAutor Mik

  5. 0

    Ich möchte nach meine Lösung, wie es nahm mich eine Weile, um meinen code zu arbeiten und vielleicht jemand wird das nützlich finden, trotz der Tatsache, dass dies ist ein altes Thema...

    Ich hatte ein ähnliche problem. Ein Bild war überfüllt von einer übergeordneten flex-Kind-Blocks. Dies passiert nur in Chrome und Opera (webkit-Browser), trident und gecko waren schlau genug, um mit der situation umzugehen. Ich habe versucht, ein paar Lösungen hier auf stack overflow aber keine angegeben, eine direkte Lösung habe ich also cross-erfunden eine Abhilfe durch das hinzufügen eines weiteren container-Schicht zwischen oben genannten Bild-und Eltern. In der situation stellte bei der Eröffnung der post würde es so Aussehen:

    <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>

    Was dies bedeutet ist erstellen einen container (#div_fix) erhält, dass die statische Höhe und Breite, die dann vernünftig benutzt werden kann in webkit zu berechnen, die richtige Höhe in #div2.
    Bitte beachten Sie, dass position:relative und position:absolute Eigenschaften sind zwingend erforderlich für Sie zu arbeiten.

    Und ja, es sieht schlecht aus, aber bekommt den job getan 🙂

    InformationsquelleAutor Radix Salvilines

Schreibe einen Kommentar