I'm in the process of developing a web app that will be used on iOS devices, specifically targeting both iPhone 4 and iPhone 5. During my development phase using an iPhone 5 device, everything seemed to fit perfectly and work seamlessly. However, when trying to adapt the app for the smaller screen height of an iPhone 4, I encountered some challenges. Here's what I am striving to achieve:
I have structured the layout with a header div at the top, followed by a title div containing an image and date information, then a list div, and ending with a footer div. These elements are all encompassed within a container div. My goal is to keep the header, title, and footer divs fixed while allowing the content in the list div to scroll dynamically as it loads. Additionally, I want the footer to remain at the bottom of the screen and ensure that the list scrolls underneath it.
During the design process, I initially set fixed heights for each div, which worked well on my iPhone 5. However, my attempt to set the height of the list div as ((window.screen.height) - header - title - footer) resulted in the entire document scrolling instead of just the list div itself. After numerous rounds of trial and error, here is the CSS code I managed to create:
#container {
min-width: 1280px;
position: relative;
}
#header {
height: 140px;
width: 100%;
}
#title {
height: 330px;
width: 100%;
position: relative;
}
#list {
height: 1592px;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#footer {
height: 140px;
width: 100%;
}