在单页网站的标题上方制作顶部填充屏幕

Question

我正在尝试制作一个顶部带有启动页面的单页网站，向下滚动到标题。

我希望顶部用整个屏幕填充整个屏幕，当用户第一次加载页面时隐藏在底部的标题。我将在启动页面上放置一个链接以向下滚动到标题。

我该怎么做？

我的网站是www.sleepn9.com/home.htm

我的CSS顶部是：

.sTop   {height: 100%;background: url('img/top_bg.jpg') center no-repeat;}

Answer 1

因为你使用的是百分比，你需要给父母（在这种情况下可能是html, body）一个高度，以便该部分知道它的100％：JS Fiddle

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}

Answer 2

如果您可以使用some older browsers（IE＆lt; 9并且很遗憾地在iOS上的Safari＆lt; 8）不支持它，我建议使用视口单元：

.sTop { height: 100vh; }

Answer 3

您可以使用jquery执行以下操作：

$('.sTop').height($(window).height())

这适用于控制台上的Chrome，但菜单无法完美滚动，因此需要做更多的工作。