CSS粘滞页眉/页脚和完全拉伸的中间区域？

Question

使用CSS,我怎样才能简单地获得一个页面sticky header and footer,无论何时页面都是如此scrolling or not.我在网上找到了一些样本,但我还想要的是,中间内容区域应该是100% stretched area between header and footer浏览器大小.

我的意思是,我发现的大部分样本都正在使Header和Footer正确粘贴..但these are just floating实际上covering the Top and Bottom parts of the 'middle' content area.那不是我真正想要的.

Answer 1

可以对所有3个元素使用绝对位置.

#header,#footer,#content { position:absolute; right:0;left:0}

#header{
   height:100px; top:0;
}
#footer{
  height:100px; bottom:0;
}
#content{
  top:100px;
  bottom:100px;
  overflow:hidden; /* use this if don't want any window scrollbars and use an inner element for scrolling*/
}

演示:http://jsfiddle.net/RkX8B/