如何在彼此之上堆疊多個div，每個div高度均爲100％

Question

我正在創建一個垂直滾動網站。我會有一組5個div，我想要有100％的高度彼此堆疊，基本上使身體高度達到1500％。是嗎？

這是到目前爲止我的代碼：

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> 

這似乎在Safari，火狐和Chrome的工作，但它不工作的一個iPad或iPhone，並知道如何像IE的行爲，它可能不會在那裏工作。

我想知道的是1）爲什麼不能在iPad/iPhone上工作，2）有沒有更好的方法來做到這一點，也許與jQuery？

我需要每個面板有100％的高度，並有內容（panelGuts）垂直居中。我將使用jQuery ScrollTo（或一些scrollTo插件）滾動到每個div。我想不必爲每個div設置特定的高度...

任何人都可以幫忙嗎？

Answer 1

我實際上已經用HTML5弄清楚了這一點。這很簡單。對於任何人誰希望看到我的結果

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> 

而且一搗鼓你：http://jsfiddle.net/ryanjay/dwspJ/