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