固定的页眉/页脚，可滚动的内容，上方/下方的空间

Question

我已经看到了几个与此类似的问题（并进行了大量研究），但我认为其中没有一个为这个特定问题提供解决方案...

我做了一个简短的例子来说明我的意思： https : //gist.github.com/anonymous/62bb6b6e405549a36ae9

那不是我正在使用的实际代码（因为我正在使用WordPress），但是它说明了我的问题，特别是：

我正在一个站点上有一个固定的页眉和页脚，中间是内容。 我已经这样做了，它工作正常。 但是，我不希望页眉和页脚触及浏览器的顶部和底部（例如，它们在其上具有20px的边距，因此在容器和容器之间没有太多的空间）浏览器）。

问题是，当您滚动页面时，该内容在页眉/浏览器与页脚/浏览器之间的空间中可见。 如图所示，您可以看到它在页眉上方和页脚下方滚动； 我想避免这种情况。

有什么方法可以使内容容器样式化，而不会使其显示在页眉上方/页脚下方？

目前，我在页眉和页脚上使用了背景图片，并将它们推向浏览器的边缘。 但这是设计上的限制，我不想让自己那样做。

注意：我对这个项目的规格是背景必须非常重图像，这就是为什么我特别关注页眉和页脚。 这实际上限制了我们可以使用的图像，因为我们必须假定详细背景已经被切除，并且我们无法控制其剪切方式-这意味着我不能仅将页眉和页脚剪切成图像以进行“伪造”这个样子。

Answer 1

您可以只使用固定位置的div容器，而不必使用边距。

#whitebox {position:fixed; margin-top:-20px; background-color:blue;width:100%;height:24px;}

请参见基于您的代码的示例 。 只需将颜色设为白色或您的背景颜色即可。

Answer 2

如果允许使用jquery。 您可以计算固定框之间的距离，然后将内容放置在那里。

我添加了一个内部div来填充固定内容的div。

轻微的CSS变更。

在这里摆弄

var topOffset = $('#header').offset().top + 30;
var bottomOffset = $('#footer').offset().top;
var distance      = (bottomOffset - topOffset);
$("#content").css("height", distance);

更新您可能还考虑在调整浏览器大小时重新计算将上述代码转换为函数，然后也从调整大小中调用

jQuery调整大小

$( window ).resize(function() {
  $( "#log" ).append( "<div>Handler for .resize() called.</div>" );
});