css - 移动网络应用程序，百分比样式；我无法达到工作的高度

Question

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

我有一个 slider (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%;