Have div take up 1/6th of remaining parent div height

I am attempting to make a simple calendar using css.

I have a parent div that will contain the calendar, and I have a div within that that contains the header with "Monday", "Tuesday", etc and is of fixed height. I now want to add divs that represent the rows of the calendar and split the remaining space into six even rows. However, I can't figure out how to divide the REMAINING space into 6 parts. Everything I try makes the div 1/6th of the parent div.

Any tips would be appreciated.

HTML:

<div id="parent>
    <div id="header">
        ST
    </div>
    <div class="row">
        hi
    </div>
</div>

CSS:

.row{
    width:100%;
    height: 16.66%;
    background-color:red;
}