Question

Is what I state in the table possible with css3?
In css2 you can’t replicate directly that behaviour and is really boring, you have to do a lot of workarounds for something that already exists.

Here is the image I’m working on (the image is clickable to zoom in):

I’m trying to make that dark grey part to fill everything between the 2 green parts. How to make it?

Answer 1

I found the solution in an interesting article: http://www.dynamicdrive.com/style/layouts/item/css-top-and-bottom-frames-layout/

I found that link from here: http://csscreator.com/node/11049

The important part is this one:

#framecontentTop, #framecontentBottom{
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 130px; /*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: 130px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: #fff;
}

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

Expecially using position: fixed and top: auto (never used I don’t also understand very well what does it means).