div高度：100vh vs 100％

Question

在 SAFARI 8 中，如果您在常规网站上向下滚动，例如facebook.com，您会注意到其内容在顶部的半透明菜单栏后面隐约可见。页。

我正在尝试为我的网站重新创建此内容。我有四个独立滚动的列，每个列都有不同数量的图像。

模型就在这里---＆gt; http://mnml.cc/flex/index.html

我想在菜单栏后面隐约看到这些图像，但我无法弄清楚如何实现这一点，并且仍然保持列独立滚动。

在这个（失败的）模型中，你可以看到菜单背后的图像，但整个页面滚动为一个单元---＆gt; http://mnml.cc/flex/fail.html

我认为它与容器的高度有关 - “vh”与“％” - 但我无法弄清楚到底是什么。任何建议都会非常感激。

非常感谢和最温暖的问候，大卫。

Answer 1

使用您的第一个模型作为参考，从.container div中删除底部填充。填充阻止滚动内容到达窗口底部，这意味着页脚后面没有任何内容可供查看。

.container {
  padding-bottom: 0;
}

您现在可以使页脚半透明。例如：

.footer {
  background-color: rgba(0, 0, 0, .8);
}

希望这有帮助。