調整網頁高度至手機屏幕高度

我有一個手機應用程序。我想讓我的CSS與所有手機一起工作。要做到這一點，我只是用百分比爲我所有的CSS電話：調整網頁高度至手機屏幕高度

.Wrapper 
{ 
    margin: auto; 
    text-align: center; 
    width: 60%; 
}

的問題是，我不能讓網頁的高度，以匹配所有頁面。通過這個我的意思是，Android屏幕例如是巨大的（底部有很多空白），但其他手機不是。（想象下面的圖像是一個機器人，這是我的應用程序將看起來如此）

enter image description here

我曾經嘗試這樣做，以獲得高度全部相同：

body 
{ 
    text-align: center; 
    font-family: Helvetica, Arial, sans-serif; 
    color: Black; 
    background: #39bcd4 none; 
    height: 100%; 
    width: 100%; 
}

的width作品，但高度不。我怎樣才能讓高度以同樣的方式工作？如果高度是關閉的，那麼我所有的百分比將要關閉太（試圖調整每個手機瀏覽器）

來源

2011-07-11 Stanley Cup Phil

從Sitepoint's CSS Reference：

百分比值參考的元素包含塊的高度。如果未明確指定包含塊的高度（即，它取決於內容高度），並且此元素未被絕對定位，則將百分比值視爲自動。百分比值也被視爲表格單元格，表格行和行組的自動處理。

設置你的身體position:absolute;應該工作，如果它不嘗試用你的absolute定位一起加入top:0;和bottom:0;。

來源

2011-07-11 21:38:13

你的意思是說你想讓內容空出來填充高度嗎？不確定是否可以這樣做，但對所有空白的一種設計解決方案可能是垂直漸變背景在底部較暗，以使內容看起來不那麼孤獨。

來源

2011-07-11 22:50:47

如果您希望您的網站的寬度和高度是你的WebView的寬度和高度爲100％，那麼你需要設置視meta標籤：

<meta name="viewport" content="width=device-width,height=device-height initial-scale=1">

一個最好的說明，以沿可以在the Chrome developer site上找到混合應用程序其他技巧的數量。

來源

2014-07-28 14:31:10 skyjacks

使用視口的高度單元中的CSS是這樣的：

.element { max-height: 100vh; }

或

.element { min-height: 100vh; }

甚至

.element { min-height: calc(100vh - 60px); }

，如果你需要調整元素的高度，這不是全高。

來源

2017-06-30 15:33:11

調整網頁高度至手機屏幕高度

回答

相關問題