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，Firefox和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/

如何将多个div叠加在一起，每个div的高度为100％

1 个答案: