好吧，经过长时间的研究，我发现一个解决方法，我需要：
http://jsfiddle.net/CqB3d/25/

CSS：

  body {
 margin：0; 
 padding：0; 
 border：0; 
 overflow：hidden; 
 height：100％; 
 max-height：100％; 
} 

 #caixa {
 width：800px; 
 margin-left：auto; 
 margin-right：auto; 
} 
 #framecontentTop，#framecontentBottom {
 position：absolute; 
 top：0; 
 width：800px; 
 height：100px; / *顶框div的高度* / 
 overflow：hidden; / *禁用滚动条。设置为滚动以启用* / 
 background-color：navy; 
 color：white; 
} 

 #framecontentBottom {
 top：auto; 
 bottom：0; 
 height：110px; / *底部框架高度* / 
 overflow：hidden; / *禁用滚动条。设置为滚动以启用* / 
 background-color：navy; 
 color：white; 
} 

 #maincontent {
 position：fixed; 
 top：100px; / *将顶值设置为HeightOfTopFrameDiv * / 
 margin-left：auto; 
 margin-right：auto; 
 bottom：110px; / *将底值设置为HeightOfBottomFrameDiv * / 
 overflow：auto; 
 background：#fff; 
 width：800px; 
} 

 .innertube {
 margin：15px; / * IE6 hack * / 
 padding：130px 0 110px 0; / *每个DIV内部DIV的边距（以提供填充）* / 
} 

 * / *设置值为（HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0）* / 
} 

 * html #maincontent {/ * IE6 hack * / 
 height：100％; 
 width：800px; 
} 
 

HTML：

 < div id =framecontentBottom> 
< div class =innertube> 

< h3>此处的示例文字< / h3> 

< / div> 
< / div> 


< div id =maincontent> 
< div class =innertube> 

 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Sed scelerisque，ligula hendrerit euismod auctor，diam nunc sollicitudin nibh，id luctus eros nibh porta tellus。雪松匍匐。 Quisque在mi dolor，eu fermentum turpis。 Nunc posuere venenatis est，in sagittis nulla consectetur eget ... // longer longer text ... 
< / div> 
< / div> 
< / div> 
 

可能不适用于水平的东西，但它是一个正在进行的工作！

我基本上放弃了inception盒子 - 盒子里面的盒子模型，并使用动态高度和溢出属性的固定定位。

希望这可能有助于稍后找到问题的人。

编辑：这是最后的答案。

I'm trying to make a website with no vertical scrolling for a page, but i need that one of the DIVs i have to expand vertically to the bottom of the page (at most), and that when it has content that does not fit, the div should create a vertical scroller.

i already have the css for the inside of the div figured out in this fiddle, creating the scroller when needed. i also have figured out how to make the container div grow to occupy exactly the vertical space it has in the page. i just can't make them work out together!

please have in mind that in jsfiddle you won't be able to view the content of the whole website and in that sense what you get for the 2nd fiddle doesn't really show what's being done, but it works as i intended though.

just another note: as they are different fiddles, the id#container div in the 1st fiddle is he id#dcontent div of the 2nd example.

there is one other thing: for a type of content, this div will scroll vertically, but for other type of content, i want it to scroll horizontally, as it will have a product "slider" displaying elements horizontally inside this DIV.

please also look at this photo because it might be easier to understand what i'm trying to say: PICTURE

i tried looking to other questions regarding these topics, but none seemed to cover all of the aspects i'm trying to solve... :S

if there is something else i can provide to help you/me :) figuring it out, pls let me know!

thanks!

EDIT1: fixed typos

EDIT2: added picture for explanation

Well, after long research, i found a workaround that does what i need: http://jsfiddle.net/CqB3d/25/

CSS:

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#caixa{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#framecontentTop, #framecontentBottom{
position: absolute; 
top: 0;   
width: 800px; 
height: 100px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white; 
}

#framecontentBottom{
top: auto;
bottom: 0; 
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed; 
top: 100px; /*Set top value to HeightOfTopFrameDiv*/
margin-left:auto;
    margin-right: auto;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: #fff;
    width: 800px;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 800px; 
}

HTML:

<div id="framecontentBottom">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>


<div id="maincontent">
<div class="innertube">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
</div>
</div>
</div>

might not work with the horizontal thingy yet, but, it's a work in progress!

I basically dropped the "inception" boxes-inside-boxes-inside-boxes model and used fixed positioning with dynamic height and overflow properties.

Hope this might help whoever finds the question later!

EDIT: This is the final answer.