百分位高度不起作用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>