1

我试图找出这个网站的样式（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;
}

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

请帮忙。

4

1 回答 1

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");
});
于 2012-09-30T13:10:16.460 回答