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

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

Answer 2

如果允许您使用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);

<强>更新您还可以考虑在调整浏览器大小时重新计算将上面的代码转换为函数，然后从调整大小调用

JQuery Resize

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

固定页眉/页脚，可滚动内容，上/下空格

2 个答案: