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.

Answer 2

I have to edit my answer, because after reading Lokesh Suthar's answer I finally understood your question! ;-)

There is no CSS solution! You'll find the reason in the spec (http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning):

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled.

So you have to go with a JS solution like the one Lokesh Suthar has linked to in his answer.

A personal note:
Normally web designer try to avoid horizontal scrollbars at all costs!
They are "bad" for usability and most users hate to scroll horizontally. And instead of making a fixed positioned element wider than the viewport you should expand its height.
Remember: Using a JS solution on this will make content unreachable/ not visible if JS is disabled!