CSS 粘性页眉/页脚和完全拉伸的中间区域? [英] CSS Sticky Header/Footer and Fully Stretched Middle Area?

问题描述

使用 CSS，我怎样才能简单地获得一个带有 sticky header 和 footer 的页面，只要页面滚动或不滚动，它们就会永远出现.我在网上找到了一些示例，但我更想要的是，无论浏览器大小如何，中间内容区域都应该是 页眉和页脚之间的 100% 拉伸区域.

With CSS, how can i simply get a page with sticky header and footer which are appearing forever, whenever the page is scrolling or not. I found some sample online, but what i additional want is, the middle content area should be a 100% stretched area between header and footer whatever the browser size is.

我的意思是，我发现的大多数示例都正确地使页眉和页脚具有粘性……但是这些只是浮动并且实际上覆盖了中间"的顶部和底部'内容区域.那不是我真正想要的.

I mean, most of the Samples i found, are making Header and Footer sticky correctly.., but these are just floating and actually covering the Top and Bottom parts of the 'middle' content area. That's not what i really want.

推荐答案

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

Can use absolute position for all 3 elements.

#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 粘性页眉/页脚和完全拉伸的中间区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！