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");
});

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

1 个答案: