固定页眉和页脚在点击事件中移位

Question

我的 jquery 移动应用程序中的固定页眉和页脚有问题。如果我单击屏幕，固定的页眉和页脚不再固定，它们会移位，但我不知道如何修复它。有什么意见可以解决这个错误吗？ 我创建了一个fiddle。

    <div style="height:100%; width:100%" class="ui-page" data-role="page" data-position="fixed" id="main">
        <div style="height:10%"" data-role="header" data-position="fixed"> 
            <a class="ui-btn-left" name="backo" data-icon="back" data-rel="button" ></a>

        <h1>title</h1>
        </div>
        <div style="height:100%; width:100%" data-role="content" id="container">
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <div style="width:95%;padding-right:5%;" id="chatOutput">

    </div>
    </ul>
        <div style="height:15%; width:100%;background-color:#e9eaed;border: 0px;border-color: transparent;" data-role="footer" data-position="fixed">

    <div style="width:96%;padding-right:2%;padding-left:2%" class="ui-grid-a">
        <div style="height:100%;width:80%" class="ui-block-a"><input type="text" id="chatText" paceholder="type your text here"></div>
        <div style="height:100%;width:20%" class="ui-block-b"><button style="font-size:90%" class="ui-btn ui-shadow ui-icon-carat-r" id="chatSend">send</button></div></div>

      </div>
        </div>
        </div>

编辑：我发现了这个：$("[data-role=header]").toolbar({ tapToggle: false });，它工作正常。

Answer 1

在页眉和页脚 div 中添加 data-tap-toggle="false"。

这将防止在点击/单击时切换页眉/页脚

Answer 2

改变这个：

<div style="height:10%"" data-role="header" data-position="fixed">

到这里：

<div data-role="header" data-position="fixed">

另外，改变这个：

<div style="height:15%; width:100%;background-color:#e9eaed;border: 0px;border-color: transparent;" data-role="footer" data-position="fixed">

到这里：

<div style="background-color:#e9eaed;border: 0px;border-color: transparent;" data-role="footer" data-position="fixed">

Updated jsfiddle

Updated jsfiddle with persistent message box

---

一些旁注：

• 内联样式通常不是一个好主意；改用样式表。
• 像'div'这样的块元素不需要宽度：100%；默认情况下，它们会展开为全宽。
• 使用内置浏览器开发工具或 validator.w3.org 等在线工具验证 html 是否存在错误