如何根據設備屏幕大小設置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大小？

回答

相關問題