Scrolling with fixed div layout and min-widths

Question

I've been trying to layout this page, but for the life of me, can't seem to get it to work the way I want.

Window = black
Titlebar = red
Content div = blue
Vertical scrollbar = green
Horizontal scrollbar = yellow

Min titlebar/content div width of 1024px, growing to window size.

I may be completely overthinking it and the answer may be way simpler than I'm attempting.

Basically I want to have a fixed titlebar div at the top of the page that never scrolls vertically. If it does not fit in the window horizontally, I want the horizontal scrollbar to scroll both the titlebar and content. If the content div is taller than the window height, I want it to scroll, otherwise I want it to extend to the bottom of the page.

For the most part, I'm under next to no restrictions on how these divs may be set, so imagine there is a blank slate.

Needs to work on modern browsers only on recent OSes. Ideally only a CSS/HTML fix, but will consider some JS if absolutely required. Needs visible scrollbars (some versions I tried the scrollbars were off outside the window scope, ie, not just mousewheel scroll, but click and drag scroll).

Answer 1

Pure CSS Solution. Here's my updated answer. Please check.

Demo link below:

Fiddle

HTML

<div id="title-bar">Title Bar</div>
<div id="content">Contents</div>

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
}
#title-bar, #content {
    min-width:1024px;
    width:100%;
}
 #title-bar {
    position:fixed;
    top:0;
    background:#CC0000;
    height:50px;
    color:#fff;
}
#content {
    top:50px;
    position:relative;
    background:#9EC2E3;
    height:calc(100% - 50px);
    overflow:auto;
}

Just let me know if you have concerns.