크로스 브라우저 친화적 인 멀티 페이지 전체 화면, 레이아웃으로 스크롤

Question

간단한 2 페이지 레이아웃을 만들고 있는데, 몇 가지 문제를 만들었습니다.

두 페이지 모두 페이지의 전체 너비와 높이를 사용합니다. 두 번째 페이지는 존재하지만 첫 번째 페이지 위 (수직)에 숨겨져 있습니다. 버튼을 클릭하면 첫 번째 페이지가 아래로 이동하고 두 번째 페이지가 위에서 아래로 이동합니다.

첫 번째 시도에서는 2 개의 절대 위치 상자가 사용되었습니다. ie

#page1, #page2 { position: absolute; width: 100%; height: 100%; } 
#page2 { margin-top: -100%; } 

구조적으로 이는 Chrome에서 작동합니다. # page2가 화면을 벗어나고 page1이 보입니다. 불행히도 다른 사용자들에게는 그렇게 좋지 않습니다.

몇 가지 간단한 jQuery로 내 버튼을 클릭에 나는 CSS과 같이 애니메이션 :

$('#learnmore').click(function(){ 

    $('#page1').animate({'margin-top':'100%'},500); 
    $('#page2').animate({'margin-top':'0'},500); 
}); 

그래서 기본적으로, 1 페이지는 100 % 페이지 2의 마진이 제거의 마진을 추가합니다. 이 작업은 내 컴퓨터에서 잘되었지만 다른 사용자가 문제를보고했습니다. 내 레이아웃에 구조적인 문제가 있어야한다는 것을 알았습니다.

다른 브라우저에서는 가로 : 100 % 및 세로 : 100 %를 사용하지 않아 일부 예상치 못한 결과가 발생합니다. 사실입니까?

두 번째 페이지를 화면에서 숨기고 더 위에서 아래로 스크롤하도록 더 좋은 방법은 무엇입니까? 목표는 화면에 스크롤 막대가없는 상태에서 page1을로드 한 다음 page2를 내린 다음 사용자가 원하는 경우 뒤로 스크롤 할 수있게하는 것입니다.

편집 : Here is a JSfiddle of a way I have gone about it using a different structure - 브라우저에서 문제가 발생 했습니까? 이 문제를 개선 할 수 있습니까?

도움 주셔서 감사합니다.

Answer 1

margin-top에 100 %를 사용하는 대신 $ (window) .height()를 사용하는 것을 고려하십시오. 초기 화면의 높이가 100 % 인 경우 모든 브라우저에서 동일한 결과를 얻을 수 있습니다.

$('#learnmore').click(function(){ 

    $('#page1').animate({'margin-top':$(window).height()},500); 
    $('#page2').animate({'margin-top':'0'},500); 
}); 

또한 document.ready()에도 100 %로 PAGE1의 폭과 높이를 설정해야합니다

$('#page1').css("height", $(window).height() + "px"); 

(learnmore.click에서 #의 페이지 2에 대해 동일한 일을 할)