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

Question

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

在此链接的主页上，我有一个页眉，然后是一个带有过滤器覆盖的封面图片，最后是一个页脚。我已经能够使页脚作为sticky footer 发挥作用。但是在较大的屏幕上，当我增加浏览器的高度时，封面图像和粘滞页脚之间会出现令人讨厌的白色斑块。

1. 我希望封面图像溢出（如果这是正确的术语，不知道），使用 css 到达粘性页脚的点，这样中间就不会看到白斑。

   李>

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

有人可以帮我弄清楚我上面分享的链接吗？

谢谢！

Answer 1

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

Answer 2

#content-wrap{ min-height:100%;}
@media (min-width: 1200px){

html , body{ height:100%;}
.bg-centerTop70 { height: 100vh; }

}

上述 CSS 将引导您接近您的结果。