如何在彼此之上堆叠多个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/