html + css在android phonegap中無法正確呈現

Question

我正在開發Android手機應用程序，但是因爲我的html在android手機上顯示不正常。問題是，我有四個div的第一個div顯示寬度和高度爲100％的畫布，第二個div顯示標題
，第三個div顯示來自服務器的文本數據，最後一個div是用於聯繫表單，但發生了什麼如果第三個div的內容增加，那麼它會顯示來自中間的內容，但我想從頂部顯示該頁面。請看下面的圖片。
以下是我的html和css，它在瀏覽器上正常工作，但在實際設備上無法正常工作，而且我還上傳了屏幕快照。請幫我找出這個錯誤。

HTML

<div id="page"> 
    <div id="wrapper" style="display: none"> 
     <div id="header"> 
      <div class="designtech-left back"><a href="javascript:void(0);" id="backToFirstPage" class="back_button" >Back</a> 
      </div> 
      <div class="designtech-left"><h3 style=" font-size:14px; font-weight:bold;">Coures Detail</h3></div> 
     </div> 
     <div class="designtech-clear"></div> 

     <div class="course_info_div" id="courseInfo"> 
      //dynamic content name , branch, duration and desc 
       <p class="pclass">Course name : <span> Catia & 3D Max</span> </p> 
      <p class="pclass">Branch name :<span> Pune</span> </p> 
      <p class="pclass">course duration :<span> 6 Months</span> </p> 
      <p class="pclass">Description : <span> Details</span> </p> 
     </div> 
     <div class="designtech-clear"></div> 
     <div class="contact">  

      <form id="contact-form" method="post"> 
       <h3>Enquiry form</h3> 
       <div> 
        <label> 
         <span>Name: (required)</span> 
         <input placeholder="Please enter your name" type="text" id="name" > 
        </label> 
       </div> 
       <div> 
        <label> 
         <span>Email: (required)</span> 
         <input placeholder="Please enter your email address" type="email" id="email-id" > 
        </label> 
       </div> 
       <div> 
        <label> 
         <span>Telephone: (required)</span> 
         <input placeholder="Please enter your number" type="tel" id="contact" > 
        </label> 
       </div> 

       <div> 
        <label> 
         <span>Message: (required)</span> 
         <textarea placeholder="Include all the details you can" id="enquiry" ></textarea> 
        </label> 
       </div> 
       <div class="center"> 
        <button name="enquiry-form" type="button" id="enquiry-form">Submit</button> 
        <img src="res/drawable-mdpi/gif-load-medium.gif" id="email-progress" style="display: none;"/> 
       </div> 
      </form> 

     </div> 
    </div> 
</div> 

CSS

#page{ 
width:100%!important; 
height:100%; 
background-color:#ffffff; 
text-align: left; 
margin: 0pt auto; 
padding: 0 0px; 
position: relative; 
} 
#wrapper{ width:100%;} 

#header { 
    position: fixed; 
    z-index: 3; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    min-height:45px; 
    color: #eee; 
    font-weight: bold; 
    border-bottom: 1px solid #FFFFFF; 
    background: rgb(255,5,5); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(255,5,5,1) 0%, rgba(143,2,34,1) 69%, rgba(109,0,25,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,5,5,1)), color-stop(69%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0505', endColorstr='#6d0019',GradientType=0); /* IE6-9 */ 

} 

.course_info_div 
{ 
    position:relative; 
    top:45px; 
    background:#BCB9B9; 
    padding: 12px 10px 20px 10px; 
    font-weight:bold; 
    font:16px; 
    text-align: justify; 
} 

.course_info_div p.pclass{ 
    font-weight:bold; 
    padding: 5px 0; 
} 

.contact{ 
    width:100%; 
    margin:0 auto; 

} 

#contact-form { 
    text-shadow:0 1px 0 #FFF; 
    border-radius:4px; 
    -webkit-border-radius:4px; 
    -moz-border-radius:4px; 
    background:#F9F9F9; 
    padding: 10px 30px 0px 10px; 
    position: relative; 
} 

下面圖像表示兩個視圖。這是我想要的左側視圖和右側視圖在真實設備和仿真器上。

Answer 1

對不起，如果這是路要走，但你有沒有嘗試過的服務器數據被接收後調用一個location.href到頁面上的錨點？我很好奇，如果這將工作。因此，像：

HTML：

<div id="courseInfo"> 
    <a name="courseInfo"></a> 
    <p class="pclass">Course name : <span> 
    <!-- ...etc --> 
</div> 

的Javascript：

function refreshUIAfterServerData(){ 
    document.location.href = 'index.html#courseInfoAnchor'; 
} 

顯然，這並沒有得到爲什麼這個問題發生 - 但處理後W老老實實/ Android的PhoneGap的東西爲自己現在有一段時間了 - 我放棄了爲什麼要做很多事情，只是盡我所能去儘快進出。