iphone - 使用 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>

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