Fixed Headr & Sidebar

Boas,

Eu estou a tentar criar um layout que ocupe o ecrã todo, ou seja 100% height para um sistema de admin, eu já tenho o layout +/- criado, mas queria fazer uma pequena alteração que não estou a conseguir...

Portanto eu tenho este HTML e CSS:

HTML

<div id="header"> header </div>
<div id="left-sidebar">
 <div class="bar">menu left</div>
 content left
</div>
<div id="top-bar">top menu right</div>
<div id="content"> content </div>

CSS:

body { margin: 0; padding: 88px 0 0 300px; }

#header { font: 12px Arial; position: fixed; top: 0; left: 0; width: 500%; height: 88px; background: #f1f1f1; }

#left-sidebar { font: 12px Arial; position: fixed; top: 88px; left: 0; width: 300px; float: left; background: #969696; height: 100%; }
#left-sidebar .bar { height: 38px; background: #424242; }

#top-bar { font: 12px Arial; position: fixed; top: 88px; left: 300px; width: 100%; background: #424242; height: 38px; }

* html body{

 overflow:hidden;
}

* html div#content{

 height:100%;
 overflow:auto; background: #fff;
}

#content { font: 12px Arial; background: #fff; }

Então o que eu quero fazer é, em vez de a barra de scroll do browser ficar na página inteira, eu queria que ficasse somento na div do #content

Provavelmente é uma coisa bem simples, mas não estou a conseguir fazer lol