Div 100% height minus fixed size

Question

I need to create the following structure:

[        30px height        ]
[ full height (100% - 30px) ]

Is it possible to achieve this solely with HTML5 + CSS3 (cross-browser)? This DIVs must not overlap.

Answer 1

Use calc() in CSS

Updated Demo

html, body {
    height: 100%;
}

div.black {
    background: #000;
    height: calc(100% - 30px);
}

.red {
    height: 30px; 
    background: #f00;
}

Demo (Missed out the 30px div on top)

Answer 2

You can achieve this with absolute positioning without using the experimental and not widely supported calc feature, the following works in every browser since 1999:

HTML

<div id="root">
    <div id="top"></div>
    <div id="rest"></div>
</div>

CSS

#root {
    height:300px;
    width:300px;
    background:blue;
    position:relative;
}
#top {
    height:24px;
    position:absolute;
    background:green;
    border:3px solid maroon;
    width:100%;
}
#rest {
    border:3px solid yellow;
    position:absolute;
    width:100%;
    top:30px;
    bottom:0;    
    background:red;
}

JSfiddle sample