0

我怎样才能有一个页眉和页脚，中间有一个 MainContent div 填充所有可用区域但从不延伸到页脚或页眉之外？

所以换句话说，填充页眉和页脚之间的剩余空间，但不再使用更多空间？

在此处输入图像描述

我想不出我怎么能做到这一点。我尝试了很多尝试，但没有成功，因为中间内容 div 总是溢出页脚顶部，这是我不希望发生的。我希望内容 div 仅拉伸到页脚顶部，仅此而已。

我确实尝试设置溢出：隐藏；但这只是阻止滚动条出现，仅此而已。

不允许使用 Javascript。

4

4 回答 4

2

如果您绝对定位页眉和页脚，那么您应该能够将内容 div 的高度和宽度设置为 100%。确保将内容 div 的位置设置为相对。

于 2013-08-22T00:29:18.490 回答
2

本质上，您可以将底部属性设置为页脚的高度，并将溢出属性设置为自动以在必要时添加滚动条，以防止其溢出。

例如，

#content {
   position: absolute;
   top: <height of header>px;
   bottom: <height of footer>px;
   overflow: auto;
}

这是一个演示：http: //jsfiddle.net/bYdgj/1/

于 2013-08-22T00:35:29.697 回答
1

页眉和页脚是否总是应该在屏幕的那个位置？

如果是，那么您可以使用位置：固定；css 的属性。这样，您可以将页眉和页脚锚定到窗口屏幕。

如果它们被主 div 覆盖，则在其上和主内容 div 上添加一个 z-index（确保主内容具有位置属性和一个小于页眉和页脚的 z-index）

完成此操作后，您可以在主要内容 div 上添加边距，以确保它位于页眉/页脚之间

于 2013-08-22T00:31:31.927 回答
1

有几种可能的方法：

  1. 将页眉和页脚设为绝对值，然后将主体高度设为 100%
  2. 如果您想用颜色或图像填充除页眉和页脚之外的整个页面，只需将正文更改为您喜欢的任何内容background-color即可background-image
  3. 使内容 100% 并放置页眉和页脚top: 0和bottom: 0
  4. 制作页眉和页脚position: fixed，但您的页眉和页脚将在正文前面

我会采用第二种方法，因为我无法想象需要在页眉和页脚之间精确放置内容的情况。

于 2013-08-22T00:34:21.103 回答