CSS div magassága %-ban?

Hogyan lehet megoldani, hogy egy adott div-nek %-os magasságát?

Így próbálkoztam:

HTML:

<div id="alap">

<div class="elso"></div>

<div class="masodik"></div>

<div class="harmadik"></div>

</div>

CSS:

#alap {

width: 70%;

margin: 0 auto;

}

.elso {

background-color: blue;

height: 30%;

}

.masodik {

background-color: red;

height: 40%;

}

.harmadik {

background-color: orange;

height: 30%;

}