2013-08-29 64 views
0

我正在開發一個windows phone phonegap應用程序,在我的第一個div裏面出現了一些空間,這讓我很快解決了這個問題。但我沒有得到任何解決方案。 如果你有任何解決方法,請幫助我。如何刪除windows手機phonegap底部空間?

<body onload="init()"> 
    <div id="content"> 

     <div class="title" align="center"> 
      <span class="left"> 
        </span> 
      <span class="center"> 
       <img src="images/title.png"> 
        </span> 
      <span class="right"> 
       <a href="home.html" onclick="location.replace(this.href); return false;"> 
        <img src="images/home.png"/> 
       </a> 
      </span> 
     </div> 


     <div id="rapper"> 
      <div id="scroller2"> 
       <ul> 
        <li id="ln" onclick="change_click(this.id)"><div style="height:100%; width:100%;" > LN</div></li> 
        <li id="hn" onclick="change_click(this.id)"><div style="height:100%; width:100%;"> HN </div></li> 
        <li id="kn" onclick="change_click(this.id)"><div style="height:100%; width:100%;"> KN</div></li> 
        <li id="nn" onclick="change_click(this.id)"><div style="height:100%; width:100%;"> NN</div></li> 
        <li id="wn" onclick="change_click(this.id)"><div style="height:100%; width:100%;"> WN </div></li> 
        <li id="gn" onclick="change_click(this.id)"><div style="height:100%; width:100%;"> GN</div></li> 

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

     <div height="80%"> 
      <div id="wrapper"> 
       <div id="scroller"> 
        <ul id="listcontent"> 
        </ul> 
       </div> 
      </div> 
     </div> 

     <div id="raper"> 
      <div id="scroller3"> 
       <ul id="pages"> 

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

     <div id="previouspage" style="text-align: center;" onclick="pagination(-1)"> 
      <img height="100%" src="images/previous.png"/> 
     </div> 

     <div id="nextpage" style="text-align: center;" onclick="pagination(1)"> 
      <img height="100%" src="images/next.png"/> 
     </div> 

    </div> 

</body> 

我的CSS代碼

 * 
      { 
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
       -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box; 
       box-sizing: border-box; 
      } 

      a 
      { 
       text-decoration: none; 
      } 

      html, body 
      { 
       margin: 0; 
       padding: 0; 
       border: 0; 
       outline: 0; 
       width:100%; 
       height:100%; 
       overflow: hidden; 
       text-decoration: none; 
       font-family:arial; 
      } 


     /*panel*/ 

      #content 
      { 
       height:100%; 
       width:100%; 

      } 


     /*title*/ 

      .title 
      { 
       height:8.75%; 
       border-bottom-color: #000; 
       border-bottom-style: solid; 
       border-bottom-width: 1%; 

      } 

      .title img 
      { 
       height:98%;    
      } 

      .title .center 
      { 
       height:100%;  
       width:50%; 
       float: left;  

      } 

      .title .right 
      { 
       height:100%;  
       width:25%; 
       float: left;  
       margin:0 auto; 
       overflow:hidden;  

      } 

      .title .left 
      { 
       height:100%; 
       width:25%; 
       float: left;  
       margin:0 auto; 
       overflow:hidden;  

      } 

     /*body*/ 

      #inner 
      { 
       height:80%; 
       width: 100%; 
       float: left;  

      } 

      #header 
      { 
       height:12%; 
       color:#000000; 
       width: 100%; 
       text-align:center;  

      } 

      #head 
      { 
       height:6%; 
       color:#000000; 
       width: 100%;   
       padding-top:2%; 
       text-align:center;  

      } 

      #heading 
      { 
       width: 100%; 
       font-family: arial; 
       background: #f00; 
       color:#ffffff; 
       text-align: center; 
       align:center;  

      } 



     /*tiles*/ 

      .vcard img 
      { 
       margin-left:10%; 
       margin-right:10%; 
       width: 80%; 
       height:auto; 
       display:block; 
       background-repeat:no-repeat; 
       background-size:100%; 
       background-color:transparent; 
       border:none; 
       image-rendering: -webkit-optimize-contrast;  

      } 

      .vcard 
      { 
       width: 33%; 
       height:auto; 
       float: left;   
       overflow:auto;  

      } 

      .card 
      { 
       width: 33%; 
       height:33%; 
       float: left;   
       overflow:auto;  

      } 

      .space 
      { 
       height: 10%; 
       text-align:center;  

      } 

      .primary 
      { 
       height: 20%;  
       width:100%;  

      } 


     /*scroller*/ 

      #wrapper 
      { 
       position: absolute; 
       z-index: 1; 
       top: 14%; 
       bottom: 4%; 
       left: 0; 
       right: 0; 
       width: 100%; 
       overflow: hidden; 

      } 

      #Wraper 
      { 
       position: absolute; 
       z-index: 0; 
       top: 39%; 
       bottom: 0PX; 
       left: 0; 
       right: 0; 
       width: 100%; 
       overflow: hidden; 

      } 

      #scroller 
      { 
       position: absolute; 
       z-index: 1; 
       -webkit-tap-highlight-color: rgba(0,0,0,0); 
       width: 100%; 
       -webkit-transform: translateZ(0); 
       -moz-transform: translateZ(0); 
       -ms-transform: translateZ(0); 
       -o-transform: translateZ(0); 
       transform: translateZ(0); 
       -webkit-touch-callout: none; 
       -webkit-user-select: none; 
       -moz-user-select: none; 
       -ms-user-select: none; 
       user-select: none; 
       -webkit-text-size-adjust: none; 
       -moz-text-size-adjust: none; 
       -ms-text-size-adjust: none; 
       -o-text-size-adjust: none; 
       text-size-adjust: none; 
       height: auto; 

      } 

      #loadmore 
      { 
       background:#ff0000; 
       color:#ffffff; 
       text-align:center; 

      } 

      #rapper 
      { 
       position: absolute; 
       z-index: 1; 
       top: 8.75%; 
       bottom: 87%; 
       left: 0; 
       width: 100%; 
       background: #000; 
       overflow: hidden; 
       font-family: arial; 
       border-bottom-color: #000; 
       border-bottom-style: solid; 
       border-bottom-width: 1%; 

      } 

      #scroller2 
      { 
       position: absolute; 
       font-family: arial; 
       z-index: 1; 
       width: 188%; 
       height: 100%; 
       background-color: #a00; 
       -webkit-transform: translateZ(0); 
       -moz-transform: translateZ(0); 
       -ms-transform: translateZ(0); 
       -o-transform: translateZ(0); 
       transform: translateZ(0); 
       -webkit-touch-callout: none; 
       -webkit-user-select: none; 
       -moz-user-select: none; 
       -ms-user-select: none; 
       user-select: none; 
       -webkit-text-size-adjust: none; 
       -moz-text-size-adjust: none; 
       -ms-text-size-adjust: none; 
       -o-text-size-adjust: none; 
       text-size-adjust: none; 

      } 

      #scroller ul 
      { 
       list-style: none; 
       padding: 0; 
       margin: 0; 
       width: auto; 
       height: 100%; 

      } 


      #scroller2 ul 
      { 
       list-style: none; 
       padding: 0; 
       margin: 0; 
       width: auto; 
       height: 100%; 
       background-color: #000000; 
       text-align: center; 

      } 

      #scroller2 li 
      { 
       display: block; 
       float: left; 
       width: auto; 
       padding:0% 3px 0% 3px; 
       height: 100%; 
       background-color: #000000; 
       color:#ffffff; 
       border:2px solid #000000; 
       border-radius:5px; 

      } 


      #scroller3 
      { 
       position: absolute; 
       z-index: 1; 
       width: 188%; 
       height: 100%; 
       background-color: #da1e15; 
       -webkit-transform: translateZ(0); 
       -moz-transform: translateZ(0); 
       -ms-transform: translateZ(0); 
       -o-transform: translateZ(0); 
       transform: translateZ(0); 
       -webkit-touch-callout: none; 
       -webkit-user-select: none; 
       -moz-user-select: none; 
       -ms-user-select: none; 
       user-select: none; 
       -webkit-text-size-adjust: none; 
       -moz-text-size-adjust: none; 
       -ms-text-size-adjust: none; 
       -o-text-size-adjust: none; 
       text-size-adjust: none; 

      } 

      #scroller3 ul 
      { 
       list-style: none; 
       padding: 0; 
       margin: 0; 
       width: auto; 
       height: 100%; 
       text-align: center; 

      } 

      #raper 
      { 
       position: absolute; 
       z-index: 1; 
       top: 96%; 
       bottom: 0%; 
       left: 20%; 
       width: 60%; 
       background: #da1e15; 
       overflow: hidden; 
       visibility:hidden; 
      } 


      #previouspage 
      { 
       position: absolute; 
       z-index: 1; 
       top: 96%; 
       bottom: 0%; 
       left: 0%; 
       width: 20%; 
       background: #da1e15; 
       border:2px solid #000000; 
       visibility:hidden; 
      } 

      #nextpage 
      { 
       position: absolute; 
       z-index: 1; 
       top: 96%; 
       bottom: 0%; 
       left: 80%; 
       width: 20%; 
       background: #da1e15; 
       border-bottom-color: #000; 
       border-bottom-style: solid; 
       border:2px solid #000000; 
       visibility:hidden; 
      } 

黑色部分提到,空間

enter image description here

+1

,請複製粘貼一些代碼 –

+0

截圖請 – Cheese

+1

這個問題解決了嗎?你的修補程序是什麼? –

回答

0

在MainPage.xaml中變化

shell:SystemTray.IsVisible="True" 

shell:SystemTray.IsVisible="False" 
0

您所看到的空間是由於系統認爲你正在使用的瀏覽器和離開地址欄的空間。

要刪除它應該足以將此代碼添加到您的CSS:

@-webkit-viewport{width:device-width;} 
@-moz-viewport{width:device-width;} 
@-o-viewport{width:device-width;} 
@viewport{width:device-width;} 
@-ms-viewport{width:device-width;} 

如果沒有足夠的I將尋找其他的修改我已經做了我的代碼。

如果你的看法變得小於預期也嘗試使用:

@-ms-viewport{width:320px;} 
+0

似乎不起作用 – krisrak

相關問題