html - 如何根据设备屏幕尺寸设置 div 尺寸？

Question

我正在开发一个可在 iOS 设备(iPhone4 和 iPhone5)上使用的网络应用程序。我使用 5 开发了该应用程序，一切都适合并完美运行，但试图让它适应 4 的较小高度似乎不起作用。这是我想要完成的:

我在顶部有一个标题 div，一个包含图像和日期的标题 div，然后是一个列表 div，然后是一个页脚 div。所有这些都包含在一个名为容器的 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%;
}

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 并更新位置。