1

我正在使用 HTML 和 CSS 为移动应用程序设计一个表单。该表单有一个注册页面，其中包含几个文本字段。页眉和页脚位置是固定的。

我的问题是，当我单击特定文本字段（给定onfocus字段的功能）并滚动页面时，屏幕在页眉和页脚中向上移动，因为它们是固定的，但仅选定的字段会位于页眉的顶部。我不明白为什么仅选择的文本字段就会上升并且标题内的其余形式滚动时会发生这种情况。

下图说明了我的问题：

手机问题

当我选择用户名文本框并向上滚动时，仅此字段会上升到页眉，其他字段在页眉和页脚内滚动。

注意：这里的页眉和页脚保持固定。

更新代码

<body>
<div style="background: #000;height: 60px;position: fixed;  padding: 0 10px;width: 96%;z-index: 9999;" id="header-wrap">
    <header class="center">
<h1 id="logo">
<a href="/">My App</a>
</h1>
<h2 class="mob-usrname" style="display:none;">Mark</h2>
</header>
</div>
<section id="main" class="tabs">
<div class="page-wrap">
<h2>Register</h2>
<form class="form" method="post">
<p>
<label for="id_first_name">First name</label>
<input id="id_first_name" class="textinput" type="text" maxlength="30" value="Dan" name="first_name">
<span class="helptext"></span>
</p>
<p>
<label for="id_last_name">Last name</label>
<input id="id_last_name" class="textinput" type="text" maxlength="30" value="Hibma" name="last_name">
<span class="helptext"></span>
</p>
 <p>
<label for="id_email">E-mail address</label>
                <input id="id_email" class="textinput" type="text" maxlength="75" value="mymail@mail.com" name="email">
<span class="helptext"></span>
</p>
<p>
<label for="id_password1">Password</label>
<input id="id_password1" class="textinput" type="password" name="password1">
<span class="helptext"></span>
 </p>
 <p>
<label for="id_password2">Password Confirmation</label>
<input id="id_password2" class="textinput" type="password" name="password2">
<span class="helptext">Enter the same password as above, for verification.</span>
</p>
<p>
<label for="id_phone">Phone</label>
<input id="id_phone" class="textinput" type="text" maxlength="20" value="257-635-4735" name="phone">
<span class="helptext"></span>
</p>
<p>
<label for="id_button">Button</label>
<input id="id_button" class="textinput" type="text" maxlength="32" value="sample" name="button" readonly="readonly">
<span class="helptext"></span>
 </p>
<input id="submit" type="submit" value="Save">
 </form>
 </div>
</section>
<div style="background:#2C2C2C;bottom: 0;display: block !important;height: 60px;line-height: 60px;position: fixed;width: 100%;" class="mobile-footer" style="display:none">
<ul>
<li class="sam">
<a href="/">
<span></span>
<em>My Footer</em>
</a>
 </li>
<li class="mobile-sample sample">
<a href="/sample/logs">
 <span></span>
<em>logs</em>
 </a>
 </li>
</ul>
</div>   
</body>
4

3 回答 3

2

您的Jquery Mobile页面结构应如下所示。

<div data-role="page">

<div data-role="header" data-position="fixed">
    <h1>Page Title</h1>
</div><!-- /header -->

<div data-role="content">
    <p>Page content goes here.</p>
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->

 </div><!-- /page -->
于 2013-03-29T12:22:58.507 回答
0

见下面的例子

 <body style="margin:0px; padding:0px;">
     <div style="font-size:25px; background:#96F; position:fixed; width:100%;"> HEADER HERE </div>
     <div style="font-size:20px; background:#CCC;">
    MIDDDLES HERE <br />
           <br />
           <br />
           <br />
           <br />MIDDDLES HERE<br />MIDDDLES HERE<br />MIDDDLES HERE<br />MIDDDLES HERE<br />MIDDDLES HERE<br />MIDDDLES HERE<br />MIDDDLES HERE<br />

   </div>
   <div style="font-size:25px; background:#99F; position:fixed; width:100%; bottom:0; "> <br />FOOTER HERE <br /></div>

于 2013-03-29T11:12:40.040 回答
0

我不太确定发生了什么。但在注册头之前添加几个<br>似乎有帮助。

http://jsfiddle.net/btevfik/M2u8f/

于 2013-03-29T12:27:18.620 回答