CSS - content height

Cześć wszystkim,
mam bardzo banalny problem, lecz nie mogę sobie z nim poradzić.

Chciałbym zrobić coś takiego:

<div class="rodzic">
<div class="dziecko">
</div>
</div>

.rodzic
{
    background-color:white;
    width: 1024px;
    height: 1000px;
}

.dziecko
{
    background-color:green;
    float:left;
    width:200px;
    height: 100%;
}

Wszystko ładnie się układa. Tylko chciałbym się pozbyć w .rodzic height'a stałego, ponieważ on odpowiada za treść na stronie, a jak wiadomo treści na stronie może być różna ilość. W momencie gdy usunę height z .rodzic, .dziecko kurczy się do ilości treści jaka w nim jest ( a tam jest mniej treści niż w .rodzic). Pytanie jak zrobić by .rodzic ustalał się do ilości na stronie, a .dziecko pobierał tą ilość.

Prosiłbym o pomoc :)

Masz dwa wyjścia: stosować dziwaczne kombinacje albo użyć modelu flexbox. Flexbox to nowość, ale całkiem już dobrze obsługiwana przez przeglądarki.