having issue with scrolling on iOS with jquery mobile - iphone

Question

PLease see the image below
As you can see in the image. This area is empty. The content area is not shown until the bottom of the screen. The bottom area remains empty with my css solution for ios. Please code below
css
.ui-content {
padding: 0;
}
body {
margin: 0;
}
div#container {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
div[data-role="header"] {
position: absolute;
top: 0;
left: 0;
right: 0;
}
div[data-role="content"] {
position: absolute;
top: 42px;
bottom: 0;
left: 0;
right: 0;
}
.scrollable {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.scrollable > * {
-webkit-transform: translateZ(0px);
}
here is my html
<div id="container">
<div data-role="page" id="page">
<div data-role="header">
<h1>Net bank codes</h1>
</div><!-- /header -->
<div data-role="content" id="contents" class="scrollable">
<ul id="codesContainer"></ul>
</div><!-- /content -->
</div><!-- /page -->
</div>
Why the bottom area remains empty and how can I fix so that the contents displays until the bottom of the screen?