Div placing 100% height - html

Question

Currently I'm having troubles getting my layout working cross-browser. In the attached image you are able to see a preview.
height: 100%;
Some information:
div #Header
Width: 100%
height: variable
div #Sidebar (overflow-y)
Width: 300px
height: 100% minus header + footer heights
div #frameHeader
Width: 100% minus sidebar width (300px)
height: 100% minus header + footer heights
iframe #iframe (overflow-y)
Width: 100% minus sidebar width (300px)
height: 100% minus header + footer + frameheader height
div #Sticky Footer (sticky to bottom ofcourse)
Width: 100%
height: variable
I've spend countless hours trying to get this to work, I'm thinking someone should have faced this problem before? I'm hoping someone is able to give me a working cross-browser example!
Current code: http://jsfiddle.net/s6wVw/ (ugly css but I think you get the point ;))
Attachment (preview) can be found below
preview image

Answer 1

In your question you keep making false statements and contradicting yourself (e.g. you're talking about a sticky footer but you also imply that the page doesn't scroll - as heights of all elements sum to 100%). However, I'll try to help you none-the-less.
For the reason stated above, I've made the following assumptions:
You want the dimensions of the main areas (header, footer, sidebar, frame header, frame body) to always sum to 100%
You don't want the browser to scroll
You want scrolling in the side bar and frame body if the content overflows
The above would lead to a poor site design because if the browser/window size were to be <= 300px wide then you wouldn't be able to see any of the frame etc.. Similarly, if the browser/window height <= foot height + head height then you wouldn't see any of the sidebar, frame head, or frame body.
That being said, here is an example using jQuery, html, and css.
CSS
html, body{
margin:0; padding:0; border:0;
color:#fff;
}
#head{
width:100%;
background:#aaa;
}
#body{
width:100%;
}
#sidebar{
display:inline-block;
width:300px; height:100%;
background:#111;
vertical-align:top;
overflow:scroll;
}
#frame{
display:inline-block;
vertical-align:top;
height:100%;
}
#fhead{
width:100%;
background:#333;
}
#fbody{
width:100%;
background:#777;
overflow:scroll;
}
#foot{
position:fixed;
top:100%;
width:100%;
background:#aaa;
}
h1{margin:0; padding:10px;}
jQuery
function setSizes(){
var docWidth = $(window).width();
var docHeight = $(window).height();
var headHeight = $('#head').height();
var footHeight = $('#foot').height();
var bodyHeight = docHeight - headHeight - footHeight;
var fHeadHeight = $('#fhead').height();
$('#body').css({
height: bodyHeight
})
$('#sidebar').css({
height: bodyHeight
})
$('#frame').css({
width: docWidth - 300
})
$('#fbody').css({
height: bodyHeight - fHeadHeight
})
$('#foot').css({
"margin-top": -footHeight
})
}
$(function(){
setSizes();
var doit;
$(window).resize(function(){
setSizes();
setSizes();
})
})
HTML
<div id="head"><h1>Head Section</h1><br><br><br><br></div>
<div id="body">
<div id="sidebar"><h1>Side Bar</h1>
</div><div id="frame">
<div id="fhead"><h1>Frame Head</h1><br><br></div>
<div id="fbody"><h1>Frame Body</h1></div>
</div>
</div>
<div id="foot">
<h1>Foot Section</h1><br>
</div>
NOTES
You can put whatever content you like inside of the following divs: #head, #sidebar, #fhead, #fbody, #foot
The jQuery runs the setSizes(); function twice on window resize. This is to account for any scrollbars that may impact the available width/height
You may need to set additional overflow rules to other elements depending on what content you place in the divs