13

使用 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。那不是我真正想要的。

在此处输入图像描述

4

3 回答 3

15

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

于 2013-01-28T07:37:59.500 回答
4

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

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

Flex Boxes (CSS display:flex;) 在这方面非常强大，它们可以完美地与边框、边距和/或内边距的任意组合配合使用。

他们可以根据需要将您的屏幕空间划分为多个 Div，使用固定大小、百分比大小或“剩余的任何内容”为每个内部 Div。这些可以按任何顺序排列，因此您不仅限于页眉和/或页脚。它们也可以水平使用而不是垂直使用，并且可以下一步使用。

因此，您可以在它们之间拥有一个固定大小的页眉、一个 20% 的页脚，以及一个动态大小的“剩下的”客户区。反过来，在该客户区域内，您可以在客户区域的左边缘有一个百分比宽度的菜单栏，旁边有一个固定宽度的垂直分隔线，以及一个占用“剩下的东西”的客户区域在那个右边。

这是一个 Fiddle 来演示所有这些。相关的 CSS 非常简单。 CSS Flex Box (display:flex;) 带边框/边距/填充的演示

例如，这里有两个 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 教程

希望这一切都有帮助！

于 2016-04-13T23:18:23.947 回答
2

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

从我的脑海中你会得到类似的东西：

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

如果您在容器上使用某种背景并想要拉伸它，则高度：100%；应该做...

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

于 2013-01-27T01:01:18.667 回答