여러 div를 서로 겹쳐서 높이를 100 %로하는 방법

Question

세로로 스크롤되는 웹 사이트를 만들려고합니다. 기본적으로 몸의 높이를 1500 %로 설정하여 높이를 100 %로하고 싶은 5div 세트를 갖습니다. 네? 여기

지금까지 내 코드입니다 :

CSS

#contentWrapper { 
     position: relative; 
     width: 600px; 
     height: 1500%; 
     margin: 0 auto; 
     border: 1px solid red; 
    } 

    .panel { 
     position: relative; 
     height: 6.66%; 
     border: 1px solid blue; 
    } 

    .panelGuts { 
     position: relative; 
     top: 50%; 
     width: 100%; 
     height: 600px; 
     margin: -300px 0 0 0; 
     border: 1px solid green; 
    } 

HTML :

<div id="contentWrapper"> 
    <div class="panel"> 
     <div class="panelGuts"> 
      content 
     </div> 
    </div> 

    <div class="panel"> 
     <div class="panelGuts"> 
      content 
     </div> 
    </div> 

    <div class="panel"> 
     <div class="panelGuts"> 
      content 
     </div> 
    </div> 
</div> 

이 사파리, 파이어 폭스와 크롬에서 작동하는 것 같다하지만이 작동하지 않습니다 iPad 나 iPhone을 사용하고 IE의 작동 방식을 알고 있다면 아마 거기에서도 작동하지 않을 것입니다.

내가 알고 싶은 것은 1) iPad/iPhone에서 작동하지 않는 이유는 무엇입니까? 2) 더 좋은 방법은 jQuery일까요?

높이가 100 %이고 내용이 (panelGuts) 세로로 가운데에 있어야합니다. jQuery ScrollTo (또는 일부 scrollTo 플러그인)를 사용하여 각 div로 스크롤합니다. 각 div에 특정 높이를 설정하지 않아도됩니다.

아무도 도와 줄 수 있습니까?

Answer 1

사실 HTML5로 이것을 알아 냈습니다. 그것은 꽤 간단했다. http://jsfiddle.net/ryanjay/dwspJ/

: 당신을 위해

CSS

body, html { 
    margin: 0px; 
    padding: 0px; 
    background: #FFF; 
    height: 100%; 
} 

#contentWrapper { 
    position: relative; 
    width: 600px; 
    height: 100%; 
    margin: 0 auto; 
} 

.panelContainer { display: inline; } 

.panel { 
    position: relative; 
    display: table; 
    height: 100%; 
    width: 100%; 
    background:green; 
} 

article.panel:nth-child(2n+2) { 
    background:blue; 
} 

.panelGuts { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    height: 600px; 
    margin: -300px 0 0 0; 
    border: 1px solid black; 
} 

그리고 내 HTML

<div id="contentWrapper"> 
    <section class="panelContainer"> 
     <article class="panel"> 
     <div class="panelGuts"> 
      text 1 
     </div> 
     </article> 

     <article class="panel"> 
     <div class="panelGuts"> 
      text 2 
     </div> 
     </article> 
    </section> 
</div> 

그리고 바이올린 내 결과를보고 싶어 사람들을위한