Question

I am looking to create a vertically scrolling website. I’ll have a set of 5 divs that I want to have a height of 100% that are stacked on one another, basically making the body 1500% in height. Yeah?

Here is my code so far:

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>

This seems to work in Safari, Firefox, and Chrome but it doesn’t work on an iPad or iPhone, and knowing how IE like’s to behave, it probably won’t work there either.

What I am wanting to know is 1) Why is won’t work on an iPad/iPhone, 2) is there a better way to do this, maybe with jQuery?

I need each panel to have a height of 100% and have the content (panelGuts) be vertically centered. I’ll be using jQuery ScrollTo (or some scrollTo plugin) to scroll to each div. I’d like to NOT have to set a specific height to each div…

Can anyone help?

Answer 1

I actually figured this out with HTML5. It was pretty simple. For anyone who wants to see my results

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;
}

And my 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>

And a Fiddle for you: http://jsfiddle.net/ryanjay/dwspJ/