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

我正在使用iOS设备上使用的网络应用程序，包括iPhone4和iPhone5。我使用5开发了应用程序，并且所有东西都适合并且完美地工作，但试图使它适合4的较小高度似乎不起作用。这里就是我希望实现的：如何根据设备屏幕大小设置div大小？

layout of divs

我有一个头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%; 
}

来源

2013-07-21 Kyle Klink

您是否尝试过使用媒体查询？ –

你能否提供Jsfiddle ...... –

昨晚我看了一下，但没有尝试。我想在这种情况下为每个设备分别设置样式表吗？ –

您可以使用固定positionings，再加上，而不是指定的#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-21 15:22:53

作品。谢谢！ –

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

回答

相关问题