1

我正在为一个乐队构建一个移动应用程序，显然希望它能够在当今所有过多的手机中很好地显示。我一开始是为我自己的设备构建的，它看起来和工作都很棒，所以现在我正在按百分比重新设计它，以便它可以在所有设备上运行。

我有一个滑块（jquerytools），如果我将宽度设置为 100%，那么它在我的 iphone 和我的 ipad 中非常宽......成功，但是我对高度没有任何运气。它似乎只接受以 px 为单位的高度。如果我以百分比设置高度，它就不会显示。

有任何想法吗？

更新的 CSS：

#header{
width:100%;

position:relative;
z-index: 20;
box-shadow: 0 0 10px white;
}

.scrollable {
position:relative;
overflow:hidden;
width: 100%;
height: 100%;
box-shadow: 0 0 20px purple;
/*  height:198px; */
z-index: 20;
}


.scrollable .items {
/* this cannot be too large */
width:1000%;
position:absolute;
clear:both;
box-shadow: 0 0 30px green;

}

.items div {
float:left;
width:10%;
height:100%;

}

/* single scrollable item */
.scrollable img {
    float:left;
    width:100%;
   height: auto;
 /*    height:198px; */
}

/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}
4

1 回答 1

0

如果你的元素不能是position:relative，我会那样做

.scrollable {
   position:absolute; // instead of relative
   overflow:hidden;
   width: 100%;
   top:0;
   bottom:0;// instead of height: 100%;
   box-shadow: 0 0 20px purple;
   /*  height:198px; */
   z-index: 20;
}

基本上我将位置定义为绝对位置，并添加了元素从顶部零开始，从底部零开始的事实，这相当于height:100%;

于 2012-11-16T12:24:04.020 回答