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

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

CSS

.header {
    position:absolute;
    top:0;
    left:0;
    background-color: blue;
    height: 120px;
    width: 450px;
    text-align: center;
    padding: 5px0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.content {
    display: inline-block;
    background-color: red;
    padding: 10px5px;
    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;