Windows phone 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;
}
黒い部分はそのスペースに言及しています
