브라우저 높이를 변경하는 동안 데이터가 표시되지 않습니다.

Question

이상한 문제가 있습니다. 브라우저의 높이를 변경하면 데이터가 표시되지 않습니다. 또한 모바일 브라우저에서 사라 여기 ... 크기의 스크린 샷입니다 :

나는이 tutorial

Here 다음하고 문제가있는 페이지입니다.

Answer 1

슬라이드 DIV에는 height: 100%;과 html 및 body 태그가 있습니다. html은 뷰 포트 크기에서 높이를 상속합니다. 세로 높이를 변경하면 내용이보기 포트보다 커집니다. 콘텐츠는 그 뒤의 요소 아래 숨겨집니다. 모든 슬라이드에서 배경색을 제거하면 내용이 겹쳐지기 시작합니다.

슬라이드에서 height: 100%;을 제거하면됩니다. 이렇게하면 슬라이더 DIV가 실제로 차지하는 높이에 맞게 펼쳐지기 때문에 내용을 포함하거나 표시하게되어 요소 스태킹을 방지합니다.

당신이 필요로하는 것은 슬라이드를 뷰 포트 크기 또는 콘텐츠 크기로 만드는 것입니다.

http://jsfiddle.net/z6xrf/

function slideHeights() { 

    var viewportHeight = $(window).height(); 

    $('.slide').each(function(){ 

      var elem = $(this); 

      // reset so we can get the correct height of element each time 
      elem.css('height','auto'); 

      var slideHeight = elem.height(); // height of content in slide 

      if (viewportHeight > slideHeight) { 
       height = viewportHeight; 
      } else { 
       height = slideHeight; 
      } 

      elem.css('height', height); 

    }); 

} 
$(document).ready(function(){ 
    slideHeights(); // for page load 
    $(window).resize(slideHeights); // for window resize 
}); 

은 우리가 위에서했던 것은 뷰 포트의 현재 크기를 모니터의 높이를 비교하는 함수를 만들 수 있습니다 : 당신이 jQuery를 사용하고 있기 때문에 이미 이런 식으로 뭔가를 시도 할 수 슬라이드 (슬라이드의 전체 높이). 뷰 포트 높이가 콘텐츠 높이보다 큰 경우이를 사용합니다. 그렇지 않으면 슬라이드의 콘텐츠 높이를 사용합니다. 이 과정에서 이전에 설정 한 값을 읽지 않도록 min-height 값을 재설정합니다.

처음에는 페이지를 불러 와서 페이지로드시 해당 기능을 시작합니다. 그런 다음 적절할 때 호출되도록 resize 함수에 전달합니다. 브라우저가 resize 이벤트를 적용하는 방법은 http://api.jquery.com/resize/을 참조하십시오.

Answer 2

코스의 높이 문제입니다. 한 가지 작업을 수행하십시오. 각 슬라이드의 최소 높이를 약 800 또는 900 픽셀로 설정하십시오. 그리고 나서 테스트를 해보십시오.

.slide { 
background-attachment: fixed; 
height: 100%; 
min-height: 800px; /*set any height here*/ 
position: relative; 
width: 100%; 

은}