css liquid layout with div overflow inside

I'm having trouble in design layout css with div element.

Basically my main page layout design is look like the following picture :

The red box is the browser screen area. The black box is the content area where the data will included / or loaded via ajax. The green box is the data list which is the response result and contain about hundred rows inside. The data list contain header div and rows divs.

What i intend to do is set the overflow on the blue area which is the data rows so the scrollbar will appear on the right side of the blue box not on the right side of the red or black box. Then when the browser area (red) resized all the div inside will also resized to the best size.

I've managed to make the scroll bar appear on the blue box when the data inside is overflow by set css overflow : 开发者_如何学Cauto /scroll for blue box div. But the problem is the overflow : auto properties seems only work when i set a certain height for the blue box div let's say about 400px. When i resize the browser the blue box div keeps stay with 400px height.

How to make it auto resize? Thanks in advance for any help.

You need to fix the heights of the HEADER, "Table Heading Row", FOOTER and the "subfooter" row

from there you can calculate the top and bottom position offsets for the middle box, which should be absolutely positioned, the becasue it's positioned you will also need to absolutely position the two bottom footers, in my example I have wrapped them two rows and positioned them as one, this may seem excess but there are in fact a lot of your containers which are no longer required (though I didn't weed them out)

also your float code is too excessive, you don't need to relatively position every float to left: 0.0% so I chopped all tham out, you only need top relatively position something if you want to do absolute positioning inside it.. except for the body element which is all we need to use for this style layout (note I did change the end of your HTML slightly)

refiddle: HERE

and btw, I think this one those internal rows would be better as an actual <table>, it seems like rows of Data to me ;) - and the whole thing would likely mean a lot less code..

What your looking for is a positioned div for the blue box.

.blueboxdiv{
   position: relative;
   top     : 100px; // height of header - Top stays 100px away from header thus grows on resize!
   bottom  : 0px;   // Bottom sticks to bottom
   left    : 0px;   // Left sticks to left
   right   : 0px;   // Right sticks to right
}