전체 화면 줄무늬 디자인

Question

다른 '줄무늬'가있는 페이지를 디자인하려고합니다. 첫 번째 div를 전체 화면으로 표시하고 싶습니다. 사용자가 버튼을 클릭하면 전체 화면 인 다른 div로 스크롤됩니다. 여기

는 예로서 웹 사이트입니다 : http://timmytompkinsapp.com

웹 사이트의 많은이 일을하고, 나는 방법을 알고 싶습니다.

그리고 여기 내가 지금까지 한 일이다 http://jsfiddle.net/d7tdK/

내 문제는 내가 창문의 높이를 일치하도록 두 개의 줄무늬의 높이를 만드는 방법을 알고하지 않는 것입니다.

내 HTML :

<div class='first-stripe'> 
     <a href='#scroll'><button> Go down </button></a> 
    </div> 
    <div class='second-div' id='scroll'> 
     <div id='div1'></div> 
     <div id='div2'></div> 
     <div id='div3'></div> 
     <div id='div4'></div>   
    </div> 

내 CSS :

.first-stripe{ 
width: 100%; 
height:500px; 
background: yellow; 
border-bottom: 10px solid black; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
    box-sizing:  border-box; 

     } 


.second-div{ 
width: 100%; 
height:500px; 
    } 

#div1 { 
width: 50%; height: 50%; float: left; 
background: blue; 
    } 


#div2 { 
width: 50%; height: 50%; float: left;background: green; 
    } 

#div3 { 
width: 50%; height: 50%; float: left;background: black; 
} 

#div4 { 
width: 50%; height: 50%; float: left;background: red; 
} 

내 JS :

$('a[href^="#"]').click(function(){ 
    var the_id = $(this).attr("href"); 
    $('html, body').animate({ 
     scrollTop:$(the_id).offset().top 
    }, 'slow'); 
    return false; 
}); 

내 생각 엔 내가 그것에 대해 스크립트를 사용해야합니다,하지만 난 돈이다 ' 어떻게하는지.

도움 주셔서 감사합니다.

답변 : 나는 마침내이 사용

는 JS :

$(function(){ 
    $('.stripe').css({'height':(($(window).height()))}); 

    $(window).resize(function(){ 
    $('.stripe').css({'height':(($(window).height()))}); 
    }); 
}); $(window).height(); 

Answer 1

http://jsfiddle.net/d7tdK/4/

HTML

<div class='first-stripe stripe'> 
<a href='#scroll'><button> Go down </button></a> 
</div> 
<div class='second-div stripe' id='scroll'> 
    <div id='div1'></div> 
    <div id='div2'></div> 
    <div id='div3'></div> 
    <div id='div4'></div>   
</div> 

자바 스크립트

$('a[href^="#"]').click(function() { 
    var the_id = $(this).attr("href"); 
    $('html, body').animate({ 
     scrollTop:$(the_id).offset().top 
    }, 'slow'); 
    return false; 
}); 

$(window).bind('resize', handleResize); 

function handleResize(){  
    $('.stripe').height($(window).height()); 
} 

,451,515,

CSS

.first-stripe{ 
width: 100%; 
min-height:500px; 
background: #ffe503; 
border-bottom: 10px solid #2f3031; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
    box-sizing:   border-box; 
} 

.second-div{ 
    width: 100%; 
    min-height:500px; 
} 

#div1 { 
    width: 50%; height: 50%; float: left; 
    background: #3174b8; 
}  
#div2 { 
    width: 50%; height: 50%; float: left;background: #59c09f; 
}  
#div3 { 
    width: 50%; height: 50%; float: left;background: black; 
}  
#div4 { 
    width: 50%; height: 50%; float: left;background: red; 
}