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

Question

我正在尝试制作一个单页网站，顶部有一个初始页面，该页面将向下滚动到 header。

我希望顶部部分在用户首次加载页面时隐藏底部的 header 以填充整个屏幕。我将在初始页面上放置一个 link 以向下滚动到 header。

我该怎么做？

我的网站是 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 < 9 和 iOS < 8 上的 Safari）不支持它，我建议使用视口单位：

.sTop { height: 100vh; }

Answer 3

您可以使用 jquery 做如下事情：

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

这在控制台上 Chrome 中有效，但是菜单不能完美滚动，因此需要做更多的工作。

Make top section fill screen above the header in a onepage website