ios - Jquery 移动页脚上方的白色间隙

Question

所以我正在使用 Jquery Mobile 和 Phonegap 构建一个 Web 应用程序。该应用程序运行良好，直到我删除了一些已过时的输入字段和下拉菜单。

现在的问题是，当我单击页面的最后一个输入字段并激活 ios 键盘时，页脚栏不再固定并且页脚栏和 ios 键盘之间有一个白色间隙。当小键盘再次隐藏时，我看到了整个页面，但白色间隙位于页脚上方。

这在Android 平台上似乎不是问题所以我想知道这是否是CSS 问题。非常欢迎帮助。这是有问题的页面代码...

<div data-role="page"  data-theme="f" id="">
        <div data-role="header" class="ui-state-persist">
            <a href="#" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a>
            <h1>text</h1>
            <a href="#" data-icon="arrow-r" data-iconpos="no text"></a>
        </div>
            <div data-role="content">
                <label for="">Text</label>
                <input type="text" name="text" id="" value="" class="input-field required"/>
                <label for="">Text</label>
                <input type="text" name="" id="" value="" class="input-field required"/>
                <label for="">Text</label>
                <input type="text" name="" id="" value="" class="input-field required"/>
                <label for="">Text</label>
                <input type="" name="" id="" value="" class="input-field required"/>
            </div>
            <div data-role="footer" class="ui-state-persist"  style="min-height:42px;">
                <a href="#" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" style="margin-left: 10px; margin-top: 5px">Done</a>
                <a href="#main_menu" data-icon="home" data-direction="reverse" data-iconpos="notext" style="float: right; margin-right: 10px; margin-top: 5px"></a>
            </div>

Answer 1

尝试以下代码(使用 jQuery Mobile 版本 1.2.0):

<div data-role="page"  data-theme="f" id="quickquote_insured">

    <div data-role="header" class="ui-state-persist">
        <a href="#quickquote_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a>
        <h1>Contact Details</h1>
        <a href="#quickquote_driver_profile" data-icon="arrow-r" data-iconpos="notext"></a>
    </div>

    <div data-role="content">
        <label for="quickquote-insured_initials">Initials:</label>
        <input type="text" name="quickquote-insured_initials" id="quickquote-insured_initials" value="" class="input-field required"/>
        <label for="quickquote-insured_surname">Surname:</label>
        <input type="text" name="quickquote-insured_surname" id="quickquote-insured_surname" value="" class="input-field required"/>
        <label for="quickquote-insured_phone_number">Mobile number:</label>
        <input type="text" name="quickquote-insured_phone_number" id="quickquote-insured_phone_number" value="" class="input-field required"/>
        <label for="quickquote-insured_email_address">e-Mail address:</label>
        <input type="email" name="quickquote-insured_email_address" id="quickquote-insured_email_address" value="" class="input-field required"/>

        <br>

    </div>

    <div data-role="footer" class="ui-state-persist"  style="min-height:42px;">
        <a href="#quickquote_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" style="margin-left: 10px; margin-top: 5px">Done</a>
        <a href="#main_menu" data-icon="home" data-direction="reverse" data-iconpos="notext" style="float: right; margin-right: 10px; margin-top: 5px"></a>
    </div>

</div>

我知道它可能看起来很简单，但我只是添加了一个 <br>就在您的电子邮件输入字段下方。

我认为问题在于，由于您的页脚是“静态的”，您需要“填充”您的页面。

例如，如果您的页面上的字段很少并且您不“填充”您的页面，您将得到以下结果:

希望这对您有所帮助。