simple html5 mobile layout

by amindunited

HTML

<main class="pageWrap">
    <section class="page previous">
        
    </section>
    <section class="page current">
        <section class="pageBody">
            <ul>
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
                <li>e</li>
                <li>f</li>
            </ul>
        </section>
    </section>
    <section class="page next">
        
    </section>
</main>
<header class="siteHeader">
    Site Header
</header>
<footer class="siteFooter">Footer</footer>

CSS

.clearfix:after {
  content:"";
  display:table;
  clear:both;
}
* { box-sizing: border-box; opacity: 0.75; }
section {
    border: solid 1px red;
}
header.siteHeader { position:fixed; top:0px; left: 0px; width: 100%; background-color: #999999; height: 30px; line-height: 30px; }

footer.siteFooter { position: fixed; bottom: 0px; left: 0px; width: 100%; background-color: #cdcdcd; height:20px; line-height: 20px; }

main.pageWrap { width: 320px; height: 100%; position:absolute; top:0px; left: 320px; border: solid 2px green; overflow-x:hidden; padding-top: 30px; padding-bottom: 20px; }


section.page { min-height: 100%; width: 100%; position: absolute; top: 0px; }
section.page.previous { left: -100%; }
section.page.current { left: 0%; }
section.page.next { left: 100%; }

section.page.current { background-color: rgba(127, 127, 127, .5); padding-top: 30px; padding-bottom: 20px; }
section.pageBody { height: 100%; background-color: rgba(127, 0, 0, .5); }

JavaScript

$('button.scroller').on('click', function(e){
    var old = $('.pageBody').scrollTop() + 20;
    $('.pageBody').scrollTop(old);
});