css - 被页脚、页眉和页脚覆盖的 jQuery 移动内容不会固定在滚动条上

标签 css jquery-mobile blackberry

我的问题有两个。首先是页脚阻挡了一些内容,如图所示的提交按钮。如果我删除标签,那就没问题了。第二个问题是,如果向下滚动或向上滚动太多,页眉和页脚不会保持固定。我做错了什么?

enter image description here

<body>
<div data-role="page" id="landing">
  <div data-role="header"> </div>
  <div data-role="content">
    <div id="map_canvas" style="height:600px"> </div>
    <div id="info"> </div>
  </div>
  <div data-role="footer" data-position="fixed">
    <div data-role="actionbar"> <a id="help" data-role="tab"> <img src="img/ic_help.png"/>
      <p>Help</p>
      </a> <a id="chat" data-role="tab"> <img src="img/ic_textmessage.png"/>
      <p>Chat</p>
      </a> <a id="add" data-role="tab" href="#add"> <img src="img/ic_add.png"/>
      <p>Add </p>
      </a> <a id="settings" data-role="tab" href="#register"> <img src="img/Core_applicationmenu_icon_settings.png" alt="" />
      <p>Settings</p>
      </a> </div>
  </div>
</div>
<div data-role="page" id="register">
  <div data-role="header"> </div>
  <div data-role="content">
    <div class="BB10Container">
      <form id="adduser">
<label for="fname">First Name</label>
        <input type="text" name="fname" id="fname" placeholder="John"/>
        <label for="lname">Last Name</label>
        <input type="text" name="lname" id="lname" placeholder="Doe"/>
        <label for="username">Username</label>
        <input type="text" name="username" id="username" placeholder="Username"/>
        <label for="basic">Password</label>
        <input type="password" name="password" id="password" placeholder="Password"/>
        <label for="verpass">Repeat Password</label>
        <input type="password" name="verpass" id="verpass" placeholder="Password"/>
        <label for="regemail">Email</label>
        <input type="email" name="email" id="email" placeholder="your@email.com"/>
        <input type="submit" data-role="button" data-inline="true" data-icon="check" value="Submit" id="regsubmit">
</form>

    </div>
    <div id="info"> </div>
  </div>
  <div data-role="footer" data-position="fixed">
    <div data-role="actionbar"> <a id="help" data-role="tab"> <img src="img/ic_help.png"/>
      <p>Help</p>
      </a> <a id="chat" data-role="tab"> <img src="img/ic_textmessage.png"/>
      <p>Chat</p>
      </a> <a id="add" data-role="tab" href="#add"> <img src="img/ic_add.png"/>
      <p>Add </p>
      </a> <a id="settings" data-role="tab" href="#settings"> <img src="img/Core_applicationmenu_icon_settings.png" alt="" />
      <p>Settings</p>
      </a> </div>
  </div>
</div>
</div>

</body>

最佳答案

有人通过指出我的表格高度可能是 100% 来帮助我,事实确实如此。降低高度可以解决这个问题。

关于css - 被页脚、页眉和页脚覆盖的 jQuery 移动内容不会固定在滚动条上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20409971/

相关文章:

javascript - JQuery Mobile data-native-menu ="false"引发未定义的错误

javascript - 如何使用 Bootstrap 导航列表自动显示/隐藏元素

blackberry - 黑莓手机中出现 "Attempts to access secure API” 错误 - Phonegap

javascript - 如果用户的浏览器早于 : IE 10, Firefox 39、Chrome 39、Opera 8,则显示一条消息

javascript - HTML 多列选择列表

javascript - gulp-clean-css 不能在一个特定的目录中工作?

java - 具有自定义高度的 BlackBerry 垂直居中 LabelField

javascript - 如何使下拉列表不可选择?

jquery - 垂直居中屏幕靠着元素

blackberry - lwuit 中的 BBM sdk