Child div should be as high as parent div

I need a child div to be as high as its parent, but I do not know the parent's height. It can change. Setting "height: 100%" does not work, as the div will take the height of the entire page.

This is the layout of the div开发者_JAVA技巧s:

<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 should be as high as #deelnemersballoon

---

set parent div height in pixels (for ex height:100px ) and set child as 100% (height:100%) . Child only occupies parent div width fully

---

I never had much luck with height: 100%; even when playing by the rules. What does .balloonarrow do? If you're just trying to snap a graphic to the bottom of the div, you can try position: absolute; and bottom: 0px;, as long as #deelnemersballoon is set to position: relative;.

If you're just looking to make a solid/patterned visual contained by .balloonarrow, you're better off making a stretch image: create an image 3px or 4px tall, make it the background of #deelnemersballoon, and set it to repeat-y. Quick and dirty way to make a 100% height sidebar.

Hope this helps, can't tell much more without seeing your css.

---

A child div will not take up 100% of its parent if it has something in the markup before it:

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

You can find a working example here. (Removing the text from the #parent div will make the child fill it 100%)

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

The same thing applies if you have markup after the 100% child aswell, as seen here

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

---

Try adding position:relative to the parent div. Then the 100% on the child div should reference the parent div. In general 100% height is going to look for the nearest parent element that has a position set on it - and if it doesn't find any it will eventually find the body tag and use that.