위의 흰색 간격 Jquery 모바일 바닥 글

Question

그래서 Jquery Mobile 및 Phonegap을 사용하여 웹 응용 프로그램을 만들고 있습니다. 일부 입력 필드를 제거하고 쓸모없는 메뉴를 드롭하기 전까지는 앱이 정상적으로 작동했습니다.

이제는 페이지의 마지막 입력 필드 &을 클릭하면 ios 키보드가 활성화되고 바닥 글 막대가 더 이상 고정되지 않으며 바닥 글 막대와 ios 키패드 사이에 흰색 간격이 생기는 문제가 있습니다. 키패드가 다시 숨겨지면 전체 페이지가 보이지만 흰색 갭은 바닥 글 위에 있습니다.

Android 플랫폼에서 문제가되지 않는 것 같아서 CSS 문제인지 궁금합니다. 도움이 가장 환영받을 것입니다. 여기에 문제의 페이지 코드 ...

<div data-role="page" data-theme="f" id=""> 
     <div data-role="header" class="ui-state-persist"> 
      <a href="#" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a> 
      <h1>text</h1> 
      <a href="#" data-icon="arrow-r" data-iconpos="no text"></a> 
     </div> 
      <div data-role="content"> 
       <label for="">Text</label> 
       <input type="text" name="text" id="" value="" class="input-field required"/> 
       <label for="">Text</label> 
       <input type="text" name="" id="" value="" class="input-field required"/> 
       <label for="">Text</label> 
       <input type="text" name="" id="" value="" class="input-field required"/> 
       <label for="">Text</label> 
       <input type="" name="" id="" value="" class="input-field required"/> 
      </div> 
      <div data-role="footer" class="ui-state-persist" style="min-height:42px;"> 
       <a href="#" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" style="margin-left: 10px; margin-top: 5px">Done</a> 
       <a href="#main_menu" data-icon="home" data-direction="reverse" data-iconpos="notext" style="float: right; margin-right: 10px; margin-top: 5px"></a> 
      </div> 

Answer 1

이 (jQuery를 모바일 버전 1.2.0 사용) 다음 코드를 시도이다 : 나는 간단 보일 수 있습니다 알고

<div data-role="page" data-theme="f" id="quickquote_insured"> 

    <div data-role="header" class="ui-state-persist"> 
     <a href="#quickquote_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a> 
     <h1>Contact Details</h1> 
     <a href="#quickquote_driver_profile" data-icon="arrow-r" data-iconpos="notext"></a> 
    </div> 

    <div data-role="content"> 
     <label for="quickquote-insured_initials">Initials:</label> 
     <input type="text" name="quickquote-insured_initials" id="quickquote-insured_initials" value="" class="input-field required"/> 
     <label for="quickquote-insured_surname">Surname:</label> 
     <input type="text" name="quickquote-insured_surname" id="quickquote-insured_surname" value="" class="input-field required"/> 
     <label for="quickquote-insured_phone_number">Mobile number:</label> 
     <input type="text" name="quickquote-insured_phone_number" id="quickquote-insured_phone_number" value="" class="input-field required"/> 
     <label for="quickquote-insured_email_address">e-Mail address:</label> 
     <input type="email" name="quickquote-insured_email_address" id="quickquote-insured_email_address" value="" class="input-field required"/> 

     <br> 

    </div> 

    <div data-role="footer" class="ui-state-persist" style="min-height:42px;"> 
     <a href="#quickquote_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" style="margin-left: 10px; margin-top: 5px">Done</a> 
     <a href="#main_menu" data-icon="home" data-direction="reverse" data-iconpos="notext" style="float: right; margin-right: 10px; margin-top: 5px"></a> 
    </div> 

</div> 

,하지만 난 그냥 <br> 추가 이메일 입력란 바로 아래에 있습니다.

바닥 글이 "정적"이므로 문제가 있다고 생각합니다. 페이지를 "채워야"합니다. 당신이 당신의 페이지에 몇 가지 필드를 가지고 그렇게하지 않으면 "입력"경우

예를 들어, 페이지, 당신은 다음과 같은 결과를 얻을 수 있습니다 :

희망이 도움이됩니다.