html - 删除大屏幕上封面图像和粘性页脚之间的白色间距

Question

这是我正在开发的页面的链接 http://ansh-test.bitballoon.com/ .本网站已使用 Bootstrap 3 构建。

在这个链接的主页上，我有一个标题，然后是一个带有滤镜叠加层的封面图像，最后是一个页脚。我已经能够使页脚功能成为 sticky footer .但是，在较大的屏幕上，当我增加浏览器的高度时，封面图片和粘性页脚之间会出现令人讨厌的白色补丁。

1. 我希望封面图片溢出(不知道这是否是正确的术语)，使用 css 到达粘性页脚的点，这样中间就看不到白色补丁。

   <

2. 我还想控制和定义粘性页脚应开始显示在页面上的浏览器高度。

有人可以帮我解决我在上面分享的链接吗？

谢谢!

Answer 1

我将 .bg-filter div 设置为 min-height: 100vh; 并将其设置为始终占据屏幕高度的 100%。您可以使用媒体查询微调此值，以便它考虑导航和页脚高度并消除滚动的需要。视口(viewport)单位被广泛接受，所以我不会太担心浏览器支持，除非您需要 IE8 ( http://caniuse.com/#feat=viewport-units )。对于你的第二个问题，如果我理解正确的话，你需要使用一些 js 代码设置窗口滚动事件来确定它应该出现的时间。