Peculiar CSS layout questions - css

Question

I'm trying to figure out how to write some css for a peculiar layout I haven't seen before. The image below contains the sections. For guidance:
Section "1" is a header, that should be fixed within the alpha zone
Section "2" is a div which ought to have a scrollbar when it gets too tall (determined by the height of the viewport/window)
Section "3 "is a footer, that should be fixed within the alpha zone
Section "4" is a right hand, fluid, container, that will have an iframe. The iframe itself will manage the scrolling.
Any thoughts?
My code at the moment is kind of all of the place, but this is the gist of how close I got:
CSS:
.controller {
width: 400px;
height: 100%;
}
.controller header {
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 400px;
}
.controller footer {
position: absolute;
bottom: 0;
left: 0;
height: 60px;
width: 400px;
}
.controller .body {
overflow: scroll;
}
.focus {
float: left;
width: 100%;
}
Markup:
<div class="wrapper">
<div class="container">
<header></header>
<div class="body">
<footer></footer>
</div>
<div class="focus">
</div>
</div>

Answer 1

Here is a demo in jsFiddle for how to achieve this,
The style I used is
body, html {
padding:0;
margin:0;
}
.container {
width: 25%;
height: 100%;
float:left;
position:absolute;
}
.container header {
display:block;
height: 10%;
width:100%;
background-color:#ff5;
}
.container .body {
position: relative;
overflow: auto;
width: 100%;
height:80%;
background-color:#f5f;
}
.container footer {
position: fixed;
bottom: 0;
left: 0;
height: 10%;
width: 25%;
background-color:#5ff;
}
.focus {
background-color:#ddd;
position: fixed;
left: 25%;
width:75%;
height: 100%;
overflow:auto;
}
.focus iframe{
width:99%;
height: 99%;
}
Hope this help you.