How to set div size based on device screen size?

Question

I am working on a web application that will be used on iOS devices, both iPhone4 and iPhone5. I developed the application using 5 and everything works and works great, but trying to get it to fit a lower height of 4 doesn't seem to work. Here is what I want to accomplish:

I have a header div at the top, a div heading that contains the image and date, then a list of divs, followed by a footer. All of them are contained in a container named div. I want the header, header and footer headers to remain fixed, and the div list to scroll through the content dynamically loaded into it when loading. The footer should remain at the bottom of the screen, and the list should scroll from under it (if that makes sense).

I set fixed heights for all divs when developing this and it works on my iPhone5, but when I try to set the height of the list list as ((window.screen.height) - header - title - footer) the whole scrolls document, not just the div list. Here I created a lot of trial and error:

#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%; } 

Answer 1

You can use fixed positions plus instead of specifying the height of #list use the top and bottom to make it fit.

 #container { min-width: 1280px; position: relative; } #header { height: 140px; width: 100%; posiotion:fixed; top:0px; /* Top left corner of the screen */ left:0px; } #title { height: 330px; width: 100%; position: relative; posiotion:fixed; top:140px; /* 140px below the top left corner of the screen */ left:0px; } #list { /*height: 1592px; remove this - the height will be determined by top and bottom */ width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; posiotion:fixed; top:470px; /* start 470px below top left corner */ bottom:140px; /* This is the trick - specify bottom instead of height */ left:0px; } #footer { height: 140px; width: 100%; posiotion:fixed; top:auto; bottom:0px; /* Stick to bottom */ left:0px; } 

Note: from your code, I understand that #title should not be scrolled. If you want it to also scroll inside #list and update the position.