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

何が起こっているのかよくわかりません。<br>しかし、登録ヘッダーの前にいくつか追加すると役立つようです。

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

于 2013-03-29T12:27:18.620 に答える
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 に答える