title: how to remove bottom space in windows phone phonegap?
body: <p>I am developing a windows phone phonegap application, some space occurs under my first div itried lot of solution to over come this. but i did not get any solution.
  if u have any solution means please help me.</p>
  
  <pre><code>&lt;body onload="init()"&gt;
      &lt;div id="content"&gt;
  
          &lt;div class="title" align="center"&gt;
              &lt;span class="left"&gt;
                      &lt;/span&gt;
              &lt;span class="center"&gt;
                  &lt;img src="images/title.png"&gt;
                      &lt;/span&gt;
              &lt;span class="right"&gt;
                  &lt;a href="home.html" onclick="location.replace(this.href); return false;"&gt;
                      &lt;img src="images/home.png"/&gt;
                  &lt;/a&gt;
              &lt;/span&gt;
          &lt;/div&gt;
  
  
          &lt;div id="rapper"&gt;
              &lt;div id="scroller2"&gt;
                  &lt;ul&gt;
                      &lt;li id="ln" onclick="change_click(this.id)"&gt;&lt;div style="height:100%; width:100%;" &gt; LN&lt;/div&gt;&lt;/li&gt;
                      &lt;li id="hn" onclick="change_click(this.id)"&gt;&lt;div style="height:100%; width:100%;"&gt; HN &lt;/div&gt;&lt;/li&gt;
                      &lt;li id="kn" onclick="change_click(this.id)"&gt;&lt;div style="height:100%; width:100%;"&gt; KN&lt;/div&gt;&lt;/li&gt;
                      &lt;li id="nn" onclick="change_click(this.id)"&gt;&lt;div style="height:100%; width:100%;"&gt; NN&lt;/div&gt;&lt;/li&gt;
                      &lt;li id="wn" onclick="change_click(this.id)"&gt;&lt;div style="height:100%; width:100%;"&gt; WN &lt;/div&gt;&lt;/li&gt;
                      &lt;li id="gn" onclick="change_click(this.id)"&gt;&lt;div style="height:100%; width:100%;"&gt; GN&lt;/div&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div height="80%"&gt;
              &lt;div id="wrapper"&gt;
                  &lt;div id="scroller"&gt;
                      &lt;ul id="listcontent"&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="raper"&gt;
              &lt;div id="scroller3"&gt;
                  &lt;ul id="pages"&gt;
  
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="previouspage" style="text-align: center;"  onclick="pagination(-1)"&gt;
              &lt;img height="100%" src="images/previous.png"/&gt;
          &lt;/div&gt;
  
          &lt;div id="nextpage" style="text-align: center;"  onclick="pagination(1)"&gt;
              &lt;img height="100%" src="images/next.png"/&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>my css code </p>
  
  <pre><code>        * 
              {
                  -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;
              }
  </code></pre>
  
  <p>the black portion mention that space</p>
  
  <p><img src="https://i.stack.imgur.com/3XMyn.png" alt="enter image description here"></p>