CSS HTML Content fitting at a height between to areas - html

Question

I am making a responsive site for a mobile. The HTML should not be changed but the css should handle the positioning of the elements so as to not effect the main site.
BACKGROUND INFORMATION
The desktop site has a navigation bar set at the bottom of the screen with a contact number below it whilst the site title and logo is placed at the top. For the mobile this is unfeasable so I've put the navigation bar at the top of the screen alongside the title and logo. The number has remained at the bottom as desired. Between the top header and the contact number at the bottom, I have placed the bulk content area. The content is being displayed correctly by using the height:calc(100% - 336px) property to set the content wrapper 100% - the total height of the top header and the contact number. The content wrapper is then set absolute to a position top: 176px to meet the bottom of the top header. The content inside the content wrapper does not fit inside the wrapper so overflow-y:scroll is used to ensure that the user can scroll through the content area.
PROBLEM
The content area within the wrapper is not scrolling.
CODE
CSS
.PageContentBox {
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
#content {
padding: 0;
height: 100%;
overflow-y: scroll; /*This here for testing purposes*/
}
HTML
<div class="PageContentBox">
<div id="content">
<div id="pages">
<div class="page" id="page0">
<h1>HEADER</h1>
<div class="grid grid-pad" style="padding: 0 0 0 0!important">
<div class="row" id="r1">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Applications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r2">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Performance</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r3">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Specifications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

You need to set position on your .PageContentBox: top: and z-index don't work unless you define position.
Here is you updated Fiddle with the position set to absolute.

Answer 2

In your question you save already given the solution just use that only.
You have specified that absolute but not used it in css. Just use it and it will work no need to put the #content css.
css should be like this:
.PageContentBox {
position: absolute;
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
See the example
I am getting desktop and mobile view like this and I think its fine. What you say?