Question

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

现在的问题是当我点击页面的最后一个输入字段时＆amp; 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>。

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

例如，如果您的网页上的字段很少，并且您没有“填写”您的网页，您将获得以下结果：

希望这有帮助。

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

1 个答案: