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

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>" );
});