Question

I have a layout like the following:

Now what I would like if for the “Content” part to stretch to the bottom of the browser window, but not any further. Any overflow should by handled by a scrollbar on the “Content” part. I have tried position: fixed, but couldn’t quite seem to make it work.

Of course, frames are not an option, but I don’t have to please IE6 (yay!).

Answer 1

Here is an example that seems to work – http://jsfiddle.net/JQW2c/3/

<div class="toolbar">Toolbar</div>
<div class="info">info</div>
<div class="contentContainer">
    <div class="tabs">tabs</div>
    <div class="content">content</div>
</div>

body, html
{
   font-family: Arial;
   margin: 0px;
   padding: 0px; 
   height: 100%;
}

div.toolbar
{
   background-color: #EB526C;
   height: 50px;
}
div.tabs
{
   background-color: #75D17B;
   margin-right:100px; 
   height: 30px;  
}
div.info
{
   background-color: #E2F285;
   width: 100px;
   position: absolute;
   top: 50px;
   bottom: 0px;
   right: 0px;
}
div.content
{
   background-color: #7794ED;
   position: absolute;
   top: 80px;
   bottom: 0px;
   left: 0px;
   right: 100px;
   overflow: auto;
}