HTML - single page layout - absolute positioning
Have a look at this, maybe this helps a little. I made only little changes. first of all you have to know a child element is always positioned absolute or relative to his parent. so it is important to make child and parent elements, except you want a div as a placeholder to load the data in another way...

play arround with the code (like why is position:absolute 5px top and left only 5px from the orange...) it may helps to understand. also have a look at the class .app-page.active !

&lt;style type="text/css"&gt;
.app-header
{
    background-color:green;
    position: fixed;
    top: 10px;
    left: 10px;
    width: 100%;

}
.main-app-area
{
    background-color:orange;
    width: 100%;
    height: 100%;
    position:relative;
    top:20px;
    left:20px;
}

.app-page
{
    background-color:fuchsia;
    opacity:0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 5px;
    left: 5px;
    visibility: hidden;

}
.app-page.active {
    visibility:visible;
}
&lt;/style&gt;

&lt;div class="app-header"&gt;xxx
    &lt;div class="main-app-area"&gt; &lt;!-- app contains four pages --&gt;
        yyy
        &lt;div class="app-page active"&gt;zzz&lt;/div&gt;
        &lt;div class="app-page"&gt;&lt;/div&gt;
        &lt;div class="app-page"&gt;&lt;/div&gt;
        &lt;div class="app-page"&gt;&lt;/div&gt;
        &lt;div class="app-page"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;