如何根据设备屏幕大小设置div大小?

I'm working on a web app to be used on iOS devices, both iPhone4 and iPhone5. I developed the app using a 5 and everything fits and works perfectly, but trying to get it to fit the smaller height of a 4 doesn't seem to work. Here's what I'm looking to accomplish:

我正在开发一个在iOS设备上使用的web应用程序，包括iPhone4和iPhone5。我用一个5的程序开发了这个应用程序，一切都很完美，但是试图让它适合4的较小的高度似乎并不起作用。以下是我希望实现的目标:

I have a header div at the top, a title div that holds an image and the date, then a list div, followed by a footer div. All are contained within a div named container. I want the header, title, and footer divs to remain fixed, and the list div to scroll the content that's dynamically fed into it on load. The footer should remain at the bottom of the screen and the list should scroll out from under it (if that makes sense).

顶部有一个header div，一个title div包含一个图像和日期，然后是list div，后跟一个footer div。我希望页眉、标题和页脚div保持固定，并希望list div在加载时滚动动态输入的内容。页脚应该保持在屏幕的底部，列表应该从下面滚动出来(如果这有意义的话)。

I set fixed heights for all the divs when developing this and it works on my iPhone5, but when I try to set the list div height as ((window.screen.height) - header - title - footer) the entire document scrolls, rather than just the list div. Here's what I've created through much trial and error:

我设置固定高度的div在开发这个工作我iPhone5,但是当我试着设置列表div高度((window.screen.height)-头-标题页脚)整个文档卷轴,而不仅仅是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%;
}

1 个解决方案

#1

You can use fixed positionings, plus, instead of specifying the height of #list use top and bottom to make it fit.

您可以使用固定的位置，加上，而不是指定#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;
}

Note: from your code I understand #title should not be scrolled. If you want it to scroll as well put it inside #list and update the positions.

注意:从您的代码中，我知道#title不应该被滚动。如果你想让它滚动，把它放在#列表中，并更新位置。