百分點高度不起作用CSS。全屏頁面可能嗎？

Question

我在我的android應用程序中使用WebView，並且我有一個應該（否則）設計簡單的界面，但由於基於百分點的高度不起作用的問題，我遇到了一些問題。

該設備不應該有任何滾動，我需要在頁面中放置包含特定百分比大小的特定元素。這是我的CSS。

#container { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    border: 5px solid green; 
} 

#header { 
    width: 100%; 
    height: 60%; 
    border: 1px solid blue; 
} 

與下面的HTML

<div id="container"> 
    <div id="header">...</div> 
</div> 

我應該有一個容器，佔用了屏幕高度的60％，正確

現在？這隻會有意義，因爲父容器佔據屏幕高度的100％。這對我的應用程序完成是絕對必要的，我的目標是在明天完成，這是我需要設計的最後一個界面。

感謝您的任何幫助。

注：

我也試過這樣：

#container { 
    width: 100%; 
    height: 100%; 
    border: 5px solid blue; 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
} 

#header { 
    position: relative; 
    top: 40px; 
    left: 0; 
    width: 100%; 
    height: 60%; 
    border: 1px solid black; 
} 

圖片：

Answer 1

默認情況下，html, body標籤有height: auto，所以它有道理他們的風格首先，爲

加上全高

html, body{ 
 
    height: 100%; 
 
} 
 
/*as this class is parent of #container, is also must have full height*/ 
 
.main-view{ 
 
    height: 100%; 
 
} 
 
#container { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    border: 5px solid green; 
 
} 
 

 
#header { 
 
    width: 100%; 
 
    height: 60%; 
 
    border: 1px solid blue; 
 
}

<div class="main-view"> 
 
<div id="container"> 
 
<div id="header"> 
 
    </div> 
 
</div> 
 
    </div>