How to combine fixed height divs with divs with height in %?

I have 3 vertical divs: topdiv - 开发者_StackOverflowthis has a fixed height of 100px; middlediv - this should fill the rest of the page bottomdiv - this has a fixed width of 200px;

I want to place the divs in a way that the bottomdiv to be at the bottom of the screen, the top at the top and the middlediv should fill in the space between the top and bottom divs.

Previously I`we used javascript to resize the middle div, but when the browser window is resized the middle div is not changed.

Any ideas ?

someone else posted this on a similar question. I have not used this but it did help them. Maybe this will help you. It gives you the option to have a footer at the bottom of the page even if the content does not reach the bottom. Give it a try.

Well, You can use min-height: x%, but it is not possible to do it other wise using pure CSS, using jQuery it'll look something like this:

$(document).ready(function()
{
wh = $(window).height();
md = $("middlediv").outerHeight()
if ( md+100 < h)
{
$("#middlediv").css("height", w-100 + 'px');
}

}

And if you'll want to add an event handler for window resize, it's possible and will basically be the same function (more or less).

See 456bereastreet, or try this fiddle.