Css 视口的一个部分100%高，向下滚动时另一个部分可见

我想知道这个网站是如何设计的(http://hairproject.ch/fr/). 我喜欢你打开它时的想法，不管浏览器大小如何，标题图像都覆盖了视口的100%。但是你可以向下滚动到另一个部分

我试图重新创建CSS，最终我得到了以下结果：

header {            
    display: block;         
    background-image: url(background_03.jpg);           
    background-repeat: no-repeat no-repeat;         
    background-size: cover;         
    height: 100%;           
    width: 100%;            
    position: absolute;         
    left: 0;            
    top: 0;
}

这会使图像覆盖整个视口，但绝对定位会将该标题从正常工作流中取出，并将其他部分放在下面

---

请提供帮助。

标题的父元素具有固定高度（当前在我的屏幕上为402px）和相对位置。这就是导致内容下降到标题下方的原因

<div id="banner" style="height:402px;">

该网站正在使用JS来保持该高度正确

脚本源：

兴趣代码：

// Figure out browser width/height and ajust main picture -------------------------------------------------
var width  = $(window).width();
var height = $(window).height();
if ((width > 320) && (width <= 480)) { height = height + 240; }
else if (width <= 320) { height = height + 80; }
var margintop = Math.round((height/3) - 120);
$("body.home #banner").attr("style","height:" + height + "px;");
$("body.home h2").attr("style","margin-top:" + margintop + "px");

$(window).resize(function() {
  // $('#log').append('<div>Handler for .resize() called.</div>');
  var width  = $(window).width();
  var height = $(window).height();
  if ((width > 320) && (width <= 480)) { height = height + 240; }
  else if (width <= 320) { height = height + 80; }
  var margintop = Math.round((height/3) - 120);
  $("body.home #banner").attr("style","height:" + height + "px;");
  $("body.home h2").attr("style","margin-top:" + margintop + "px");
});

//计算出浏览器的宽度/高度，并调整主图片-------------------------------------------------
变量宽度=$（窗口）.width（）；
var height=$（window.height（）；
如果（（宽度>320）&&（宽度320）&&（宽度标题的父元素具有固定的高度（当前在我的屏幕上为402px）和相对位置。这就是导致内容下降到标题下方的原因

<div id="banner" style="height:402px;">



该网站正在使用JS来保持该高度正确

脚本源：

兴趣代码：

// Figure out browser width/height and ajust main picture -------------------------------------------------
var width  = $(window).width();
var height = $(window).height();
if ((width > 320) && (width <= 480)) { height = height + 240; }
else if (width <= 320) { height = height + 80; }
var margintop = Math.round((height/3) - 120);
$("body.home #banner").attr("style","height:" + height + "px;");
$("body.home h2").attr("style","margin-top:" + margintop + "px");

$(window).resize(function() {
  // $('#log').append('<div>Handler for .resize() called.</div>');
  var width  = $(window).width();
  var height = $(window).height();
  if ((width > 320) && (width <= 480)) { height = height + 240; }
  else if (width <= 320) { height = height + 80; }
  var margintop = Math.round((height/3) - 120);
  $("body.home #banner").attr("style","height:" + height + "px;");
  $("body.home h2").attr("style","margin-top:" + margintop + "px");
});

//计算出浏览器的宽度/高度，并调整主图片-------------------------------------------------
变量宽度=$（窗口）.width（）；
var height=$（window.height（）；
如果（（宽度>320）&&（宽度320）&&&&（宽度），我知道一定会有一些JavaSrcipt。谢谢flem！我知道一定会有一些JavaSrcipt。谢谢flem！