固定的页眉/页脚，可滚动的内容，空间高于/低于

我见过几个类似的问题（做了很多更多的研究），但我不认为他们中的任何一个都提供了解决这个特定问题的方法......固定的页眉/页脚，可滚动的内容，空间高于/低于

我做什么，我这里指的是一个简单的例子：https://gist.github.com/anonymous/62bb6b6e405549a36ae9

这不是我使用（因为我与WordPress的工作），但它说明我的问题，这就是，特别是实际的代码：

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

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

有没有某种方式来设置内容容器的风格，使其不会显示在页眉/页脚下方？

此刻，我在页眉和页脚上使用背景图片，并将它们推向浏览器的边缘;但它的设计限制性很强，我不想把自己锁在这样做。

注：我的这个项目的规格是背景必须非常形象，这就是为什么我特别关于页眉和页脚。这实际上限制了我们可以使用的图像，因为我们必须假定详细的背景被切断，我们无法控制它的切割方式 - 这意味着我不能将页眉和页脚切成图像来“伪造“这个样子。

来源

2014-04-18 user3550137

如果您可以使用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);

UPDATE 你也可以考虑重新计算当浏览器大小打开上面的代码放到一个函数，然后从大小调整调用以及

JQuery Resize

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

来源

2014-04-18 21:45:10 tmcc

而不是使用保证金，你可以只使用一个固定位置的div容器。

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

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

来源

2014-04-18 21:12:10 AndrewH

这绝对是我没有的东西但是在这种情况下（背景是图像而不是纯色），我仍然有同样的问题。顶部的图像总是相同的，但由于底部会根据窗口的大小被切断，所以我无法知道在哪里为页脚剪切图像。尽管谢谢你的回答！ – user3550137

固定的页眉/页脚，可滚动的内容，空间高于/低于

回答

相关问题