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

Question

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

我在这里做了一个简单的例子：https://gist.github.com/anonymous/62bb6b6e405549a36ae9

这不是我正在使用的实际代码（因为我正在使用 WordPress），但它说明了我的问题，具体来说：

我正在开发一个具有固定页眉和页脚的网站，内容介于两者之间。我已经这样做了，效果很好。但是，我不希望页眉和页脚接触浏览器的顶部和底部（例如，它们会有 20px 的边距，因此容器和浏览器）。

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

是否有某种方法可以设置内容容器的样式，使其不会显示在页眉上方/页脚下方？

目前我在页眉和页脚上使用背景图片，并将它们推到浏览器的边缘；但它非常限制设计，我不想把自己锁在那样做。

注意：我对这个项目的规范是背景必须非常重，这就是为什么我特别关注页眉和页脚。它确实限制了我们可以使用的图像，因为我们必须假设详细的背景被切断了，而且我们无法控制它的剪切方式——这意味着我不能仅仅将页眉和页脚剪切成图像来“伪造” ”这个样子。

Answer 1

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

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

轻微的 css 变化。

Fiddle here

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

更新 您也可以考虑在调整浏览器大小时重新计算 把上面的代码变成一个函数，然后从resize中调用

JQuery Resize

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

Answer 2

不使用margin，可以只使用固定位置的div容器吗？

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

See example based off your code。只需将颜色设为白色或任何背景颜色即可。