div 高度：100vh 与 100%

Question

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

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

模型在这里 ---> http://mnml.cc/flex/index.html.

我想在菜单栏后面隐约看到这些图像，但我不知道如何实现，并且仍然保持列独立滚动。

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

我认为它与容器的高度有关——“vh”与“%”——但我不知道什么地方去了。任何建议将不胜感激。

非常感谢和最诚挚的问候，大卫。

Answer 1

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

.container {
  padding-bottom: 0;
}

您现在可以将页脚设置为半透明。例如：

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

希望这会有所帮助。