Stretching A Content Div (under A Header) To Full Page Length

I've been battling with this problem for a while and I'd like to ask advice if any of you can help. I'm making a simple layout where I have a 120px high header and a content div un

Solution 1:

You can position the header absolute within the content div and set the top padding on the content div to the same height as the header.

JSFiddle

HTML

<div class="wrapper">    
    <div class="content">
        <div class="header"></div>

    </div>
</div>

CSS

.header {
    position:absolute;
    top:0;
    left:0;
    background-color: blue;
    height: 120px;
    width: 450px;
    text-align: center;
    padding: 5px 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.content {
    display: inline-block;
    background-color: red;
    padding: 10px 5px;
    width: 450px;
    height: 100%;
    padding-top:120px;
}

Solution 2:

Set max-height: 100%; instead of height: 100%; which will not over-height the header height as it is defined height: 120px;