Child div sollte so hoch sein wie parent div

Question

Ich brauche ein untergeordnetes Div, das genauso hoch ist wie das übergeordnete Div, aber ich kenne die Höhe des übergeordneten Divs nicht. Sie kann sich ändern. Einstellung "Höhe: 100%" funktioniert nicht, da das div die Höhe der gesamten Seite nehmen wird.

Dies ist das Layout der Divs:

<div id="deelnemersballoon">
    <div class="balloonarrow"></div>

    <div class="balloonborder">

        <div class="ballooncontent">
            <div id="aantaldeelnemers">1</div>
            <div id="deelnemertekst">deelnemer werd toegevoegd.</div>
            <div class="clear">
                <button>Add something</button>
            </div>
        </div>

    </div>

</div>

.balloonarrow sollte so hoch sein wie #deelnemersballoon

Answer 1

Setzen Sie die Höhe des übergeordneten Divs in Pixeln (z.B. height:100px ) und setzen Sie das Child auf 100% (height:100%). Kind nimmt nur übergeordnete div Breite vollständig

Answer 2

Ich hatte nie viel Glück mit der Höhe: 100%; selbst wenn ich mich an die Regeln gehalten habe. Was bewirkt .balloonarrow? Wenn du nur versuchst, eine Grafik am unteren Rand des Divs zu fixieren, kannst du es mit position: absolute; und bottom: 0px; versuchen, solange #deelnemersballoon auf position: relative; gesetzt ist.

Wenn du nur ein einfarbiges/gemustertes Bild machen willst, das von .balloonarrow enthalten wird, ist es besser, ein Stretch-Image zu machen: Erstelle ein 3px oder 4px hohes Bild, mache es zum Hintergrund von #deelnemersballoon und stelle es auf repeat-y. Schnell und schmutzig Weg, um eine 100% Höhe Seitenleiste zu machen.

Hoffe, das hilft, kann nicht viel mehr sagen, ohne zu sehen, Ihre css.

Answer 3

Ein untergeordnetes Div nimmt nicht 100 % der Fläche seines übergeordneten Divs ein, wenn es etwas im Markup vor ihm hat:

Html:

<div id='parent'>Parent (Mark up before child)<div id='child'>Child</div></div>

css:

   #parent {background:blue; height:500px; color:white}
    #child {background:red; height:100%}

Ein funktionierendes Beispiel finden Sie hier. (Wenn Sie den Text aus dem #parent div entfernen, füllt das Child diesen zu 100% aus)

http://jsfiddle.net/wcprA/2/

Das Gleiche gilt, wenn Sie nach dem 100 %-Kind auch noch Markup haben, wie hier zu sehen

http://jsfiddle.net/wcprA/5/

Answer 4

Versuchen Sie, position:relative zum übergeordneten Div hinzuzufügen. Dann sollten die 100% auf dem Kind-Div auf das Eltern-Div verweisen. In der Regel 100% Höhe wird für die nächstgelegene übergeordnete Element, das eine Position auf sie festgelegt hat suchen - und wenn es keine finden, wird es schließlich finden die Körper-Tag und verwenden, dass.