html - デバイスの画面サイズに基づいて div サイズを設定するにはどうすればよいですか?

Question

私は、iPhone4 と iPhone5 の両方の iOS デバイスで使用する Web アプリに取り組んでいます。私は 5 を使用してアプリを開発し、すべてが完全に適合して動作しますが、4 の小さい高さに合わせようとしてもうまくいかないようです。これが私が達成しようとしていることです：

上部にヘッダー div、画像と日付を保持するタイトル div、リスト div、フッター div があります。すべてが container という名前の div 内に含まれています。ヘッダー、タイトル、フッターの div を固定したままにし、リストの div で、ロード時に動的にフィードされるコンテンツをスクロールできるようにします。フッターは画面の下部に残り、リストはその下からスクロールアウトする必要があります (それが理にかなっている場合)。

これを開発するときにすべての div に固定の高さを設定し、iPhone5 で動作しますが、リストの div の高さを ((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%;
}