如何根据设备屏幕大小设置div尺寸？

Question

我正在开发一个可以在iPhone4和iPhone5上使用的Web应用程序。我用iPhone5开发该应用程序时一切都非常完美，但是试图让它适应iPhone4较小的高度似乎行不通。以下是我想要实现的内容：

我有一个位于顶部的标题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%;
}

- Kyle Klink

---

你尝试过使用媒体查询吗？ - Matt Cooper

请提供 Jsfiddle。 - Rajesh Hegde

我昨晚稍微研究了一下，但没有尝试。在这种情况下，我需要为每个设备单独设置样式表吗？ - Kyle Klink

Answer 1

您可以使用固定定位，而不是指定#list的高度，使用top和bottom使其适合。

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

- Yotam Omer