在使用jquery mobile在iOS上滚动时遇到问题

Question

请看下面的图片

正如您在图片中看到的那样。 This area is empty。直到屏幕底部才显示内容区域。使用ios的css解决方案，底部区域仍然是空的。请在下面编码

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

这是我的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>

为什么底部区域仍为空，我该如何修复以便内容显示到屏幕底部？