Как установить размер div на основе размера экрана устройства?

Question

Я работаю над веб-приложением, которое будет использоваться на устройствах iOS, как iPhone4, так и iPhone5. Я разработал приложение, используя 5, и все подходит и прекрасно работает, но попытка заставить его соответствовать меньшей высоте 4, похоже, не работает. Вот то, что я ищу, чтобы выполнить:

У меня есть DIV заголовка в верхней, титульный DIV, который содержит изображение и дату, затем список DIV, а затем в колонтитула дел. Все они содержатся в контейнере с именем div. Я хочу, чтобы заголовки заголовка, заголовка и нижнего колонтитула оставались фиксированными, а список div прокручивал содержимое, динамически загружаемое в него при загрузке. Нижний колонтитул должен оставаться в нижней части экрана, и список должен прокручиваться из-под него (если это имеет смысл).

Я устанавливаю фиксированные высоты для всех divs при разработке этого, и он работает на моем iPhone5, но когда я пытаюсь установить высоту списка list как ((window.screen.height) - header - title - footer), весь прокрутки документа, а не только список div. Вот что я создал через много проб и ошибок:

#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

Вы можете использовать фиксированные позиционирований, а также, вместо того, чтобы указать высоту #list использования верхней и нижней части, чтобы сделать это нужным.

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

Примечание: из вашего кода я понимаю #title не должен прокручиваться. Если вы хотите, чтобы она также прокручивалась внутри #list и обновляла позиции.