固定的页眉和页脚在单击 evnt 时会移位

Fixed header and footer become displaced at click evnt

本文关键字：evnt 单击      更新时间：2023-09-26

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

    <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 });，它工作正常。

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

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

更改以下内容：

<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">

更新的 jsfiddle

更新了带有持久消息框的 jsfiddle

一些旁注：

  • 内联样式通常不是一个好主意;请改用样式表。
  • 像'div'这样的块元素不需要width：100%;默认情况下，它们将扩展到全宽。
  • 使用内置的浏览器开发工具或在线工具（如 validator.w3.org）验证 html 是否存在错误
相关文章：