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

Question

我正在尝试了解该网站的样式 (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;
}

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

请帮忙。

Answer 1

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

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

网站正在使用 JS 来保持这个高度正确。

脚本来源：http://static.hairproject.ch/js/script.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");
});