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

前端之家收集整理的这篇文章主要介绍了CSS粘滞页眉/页脚和完全拉伸的中间区域?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用CSS,无论何时页面滚动或不滚动,我怎样才能简单地获得具有粘性页眉和页脚的页面.我在网上找到了一些样本,但我还想要的是,无论浏览器大小如何,中间内容区域应该是页眉和页脚之间的100%拉伸区域.

我的意思是,我发现的大多数样本都正在使Header和Footer正确粘贴..但是这些只是浮动并且实际上覆盖了“中间”内容区域的顶部和底部部分.那不是我真正想要的.

解决方法

可以对所有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/

猜你在找的CSS相关文章