百分比高度不適用於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>