Question

我正在为一支乐队构建一个移动应用程序，显然希望它能够在今天所有过多的手机中显示出来。我首先为自己的设备构建了它，它外观和工作都很棒，所以现在我以百分比重新编写它，以便它适用于所有设备。

我有一个滑块（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;
}

Answer 1

如果您的元素不能是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%;

移动网络应用程序，百分比造型;我无法达到工作的高度

1 个答案: