There were many issues, so I rewrote it. I have created exactly what you want. Enjoy. =)
http://jsfiddle.net/hRkx8/53/
The trick is to have your main region have a margin-bottom the same height as your footer (which you absolutely position). Thus as your blue thing gets larger, it will start pushing the bottom of the page a bit earlier than it normally would.
(edit: this version moves the footer, which is more difficult to do; however the question asked that the blue area be initialized to be as large as possible, see below for one way to do this)
Here we go! Unfortunately I have to include it inline, since jsfiddle has some severe bugs that prevent proper display. This version has the blue area start all the way at the bottom.
absolutely-positioned elements seem to have some trouble automatically scrolling as the page gets bigger, so I created a dummy #main div much like you did and had it fill the entire viewport, then inside that is both the #footer and #content (your blue and red stuff). The #footer is absolutely positioned so it takes up no space / the document doesn't care about it. As the #content expands, the #main container expands with it, dragging the footer along. The use of a margin-bottom is necessary to prevent the footer from hiding text.
The actual amount of CSS required to do this is, if you remove the demo stuff, just about 5 lines and dummy element.
<html>
<head>
<style>
body {
margin:0; padding:0;
}
* { /* just for demonstration */
box-sizing:border-box;
padding:5px;
border:1px dashed red;
-webkit-border-radius:10px; -moz-border-radius:10px;
background-color:hsla(0,50%,50%, 0.1);
}
/*important to use min-height not height*/
#main {
position:relative; width:100%; min-height:100%;
border:3px solid green;
}
#footer {
position:absolute;
left:0px; right:0px; bottom:0px; height:5em; /*can be anything*/
background-color:lightgrey;
}
#content {
position:relative;
box-sizing:border-box;
background-color:skyblue;
margin-left:auto; margin-right:auto;
padding-bottom:5em; /*must be same as #footer's height*/
margin-top:10%; /*browser bug: actually acts like 20%*/
width:50%;
min-height:80%; /*should equal 100%-marginTop*/
border:3px solid blue;
}
/* dependent elements */
#sidebar {
position:absolute;
top:0px; bottom:0px;
right:100%; width:7em;
background-color:pink;
overflow-y:scroll;
}
#topbar {
position:absolute;
bottom:100%; height:3em;
right:-10%; left:10%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
setTimeout("$('pre').animate({height:1500}, 3000)", 1000);
</script>
</head>
<body>
<div id="everything">
<div id="main">
<div id="content">
<div id="sidebar">
alpha
<br/>
beta
<br/>
gamma
<br/>
etc.
</div>
<div id="topbar">
Menu1 * Menu2 * Menu3 * ...
</div>
This is my site.
Yay.
<pre>
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
</pre>
</div>
<div id="footer">
footer
</div>
</div>
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
