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

Question

使用CSS，只要页面为sticky header and footer，我怎样才能让scrolling or not页面永远显示。我在网上找到了一些样本，但我还想要的是，无论浏览器大小如何，中间内容区域都应该是100% stretched area between header and 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*/
}

DEMO：http://jsfiddle.net/RkX8B/

Answer 2

上面介绍的解决方案适用于非常简单的布局，没有边框，边距和/或填充。您可以在网上找到许多很多解决方案。

但是，如果您只是为任何或所有Div添加边框，边距和/或填充，几乎所有解决方案都会完全分开。

Flex Boxes（CSS显示：flex;）非常强大，它们可以与边框，边距和/或填充的任意组合完美配合。

他们可以根据需要将屏幕空间分成多个Div，使用固定大小，百分比大小或每个内部Div的“剩下的”。这些可以是任何顺序，因此您不仅限于标题和/或页脚。它们也可以水平使用而不是垂直使用，然后可以使用。

所以你可以拥有一个固定大小的标题，一个20％的页脚，以及一个动态调整大小的“剩下的”客户区域。反过来，在客户区内，你可以在客户区的左边缘有一个百分比宽度的菜单栏，旁边是一个固定宽度的垂直分隔符，还有一个占据“剩下的东西”的客户区域在右边。

这是一个演示所有这一切的小提琴。相关的CSS非常简单。     CSS Flex Box (display:flex;) Demonstration with Borders/Margin/Padding

例如，这里有两个CSS类创建容器，它们将分别水平或垂直地流动它们包含的Div：

.HorFlexContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1; /* this essentially means "use all parent's inner width */
}
.VertFlexContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex: 1; /* this essentially means "use all parent's inner height */
} 

上面的小提琴确实显示了这一切。

供参考，请参阅Chris Coyier撰写的这篇优秀文章：     Flexbox Tutorial

希望这一切都有帮助！

Answer 3

你可能正在寻找“位置：固定;”属性，并将标题设置为顶部：0;页脚到底部：0;您可能还会考虑对“内容区域”进行一些填充以考虑页眉和页脚空间...

从头顶你会得到类似的东西：

header { position: fixed; top: 0; height: 100px; }
footer { position: fixed; bottom: 0; height: 100px; } 
#container {  padding: 100px 0; }

如果你在容器上使用某种背景并想拉伸它，高度：100％;应该做...

我从来没有找到使用这种布局的好方法，但是...... = \