How to avoid overflow of inner div when resize the outer div?

Question

innerMain gets resized automatically when I resize the outer div( main ). I want both header and footer to remain at top and bottom of the main div. Both should be block elements – display=block – and only resize the innerMain when main change. My current solution is causing an overflow at the bottom. Can someone help me to fit all inner divs inside the outer div and avoid overflow?

I can't use the resize option of jQuery UI Resizable as I don't know the Dom element of inner div when I draw the outer div. (Final Dom structure is not available). Calculating any pixel sizes also not a solution for me.

jsfiddle link : http://jsfiddle.net/gHLgt/16/

Answer 1

You have a few issues here that can be resolved by adding / editing as follows:

.main { position: relative; }
.footer { position: absolute; bottom: 0; width: 100%; }

Then apply your jquery to the inner div instead of the outer wrapper:

$(".innerMain").resizable();

Fiddle: http://jsfiddle.net/gHLgt/18/