Auto adjust div height to fill space - CSS

I have a top header <div 开发者_JAVA技巧id="header"></div>, a middle part <div id="content"></div> and a bottom footer <div id="footer"></div>.

Header and footer has fixed heights 50px. I want to fix the positions of header and footer on top and bottom and I want to stretch the middle part (content) to fill the remaining space.

How can I do this?

You can use position: absolute on footer and header an then position the footer with bottom: 0px. I would do it this way:

#header {
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 2;
}

#footer {
    height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    z-index: 2;
}

#content {
    top: 50px;
    width: 100%;
    position: absolute;
    z-index: 1;
}

I made it by defining the style as below;

#header, #content, #footer {
    position: absolute;
}
#header{
    top: 0;
    width: 100%;
    height: 50px;
    left: 0;
    right: 0;
}
#content {
    top: 50px;
    left: 0;
    right: 0;
    bottom: 50px;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
}

You can see my fiddle here

Thanks @rocky3000 and @Mika for support :)

Search for sticky footers LINK here on stackoverflow or with google and the problem is gone.