Mobile web app, styling in percentages; I can't get height to work [migrated]
- by Mick79
I am building a mobile app for a band and obviously want it to display well in all the plethora of handsets out there today. I built it at first for my own device and it looks and works great, so now I am reworking it in percentages so that it works in all devices.
I have a slider (jquerytools) going on and if i set width to 100% then it is perfectly wide in my iphone and my ipad... success, however I am not having any luck with height. It seems to only accept a height in px. If i set a height in percent it just doesn't display.
any ideas?
#header{
width:100%;
height:198px;
position:relative;
z-index: 20;
box-shadow: 0 0 10px white;
}
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 100%;
height:100%;
box-shadow: 0 0 20px purple;
z-index: 20;
}
.scrollable .items {
/* this cannot be too large */
width:500%;
height:100%;
position:absolute;
clear:both;
box-shadow: 0 0 30px green;
}
.items div {
float:left;
width:20%;
height:100%;
}
/* single scrollable item */
.scrollable img {
float:left;
width:100%;
height:100%;
/* height:198px; */
}
/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}
`
