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

Posted 2023-03-15

【中文标题】Jquery移动页脚上方的白色间隙

【英文标题】：White gap above Jquery mobile footer

【发布时间】：2012-10-16 14:36:00

【问题描述】：

所以我正在使用 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>

【参考方案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>。

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

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

希望这会有所帮助。

【讨论】：

感谢 Littm 的快速回复。我实施了你的建议，它确实减少了空白的数量。它还将页脚栏推到 ios 键盘中，这也不理想 我们使用的是 JQM 1.1.0 - 你认为这是部分问题吗？还有其他建议吗？非常感谢您的帮助:-)

我认为最好使用最新版本的 jQuery Mobile（目前是 1.2.0），因为它更稳定（修复了几个错误）。