inner height 100% with element above

Question

I have two div's and I want to lower div to take up the rest of the page but when I height things in the bottom div they run off the screen.

Here is my Fiddle

HTML:

<div id="full">
    <div id="header">This is the header content.</div>
    <div id="someid">
        <div id="someid2">
            Hello content    
        </div>

    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#full {
    background-color: red;
    height: 100%;
    width: 100%;
    display: table;
}
#header,
#someid{
    display: table-row;
}
#header{
    background-color: blue;
    width: 100%;
}
#someid{
    background-color: green;
}
#someid2{
    background-color:red;
    height: 100%
}

I'd like the header part to only size to the height that it needs, not what looks to be 50%. Should I be using display table row here?

Answer 1

Leave the display of the #header div as its default, 'block'.

JSFiddle: http://jsfiddle.net/LTQkG/3/

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#full {
    background-color: red;
    height: 100%;
    width: 100%;
    display: table;
}
/* REMOVED #header selector here. */
#someid{
    display: table-row;
}
#header{
    background-color: blue;
    width: 100%;
}
#someid{
    background-color: green;
    height: auto;
}
#someid2{
    background-color:red;
    height: 100%
}