如何使用 HTML 和 CSS 解决移动应用程序的固定位置答案

【问题标题】：How to solve a fixed position of mobile application using HTML and CSS如何使用 HTML 和 CSS 解决移动应用程序的固定位置
【发布时间】：2013-03-29 20:41:32
【问题描述】：

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

【问题讨论】：

不看代码就不可能知道你在做什么。你知道吗？
@btevfik 更新了我的代码，请立即查看

标签： javascript html css jquery-mobile

【解决方案1】：

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

【讨论】：

@sathya 如果你使用的是Jquery Mobile，你的页面结构应该和上面一样。将您的表单放入content div。

【解决方案2】：

见下例

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

【讨论】：

Jquery Mobile 不同于桌面网页设计。这不会解决问题。
主要基础是 css 和 html，如果使用不同的语言，那将是相同的，那么至少你可以理解语法。
@sathya 现在，它修复了页眉和页脚，只是滚动了中间内容（即表单）。
是的，页眉和页脚都是固定的，因为您说中间内容将在页眉和页脚内滚动。但是当我选择一个字段并向上或向下滚动时，选定的字段会从固定位置移出
@sathya 很抱歉，但没有解决您的问题。输入名字和姓氏是否有问题。即按标题覆盖。正确的？还是有其他问题？

【解决方案3】：

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

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

【讨论】：