3

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

div的布局

我在顶部有一个标题 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%;
}
4

1 回答 1

4

您可以使用固定定位，另外，而不是指定使用顶部和底部的高度#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并更新位置。

于 2013-07-21T15:22:53.000 回答