Android端PWA全屏模式下body无法占满html容器问题

我创建的PWA已在manifest中设置display: "fullscreen"，但页面的body元素无法占满html父容器的100%高度，页面可滚动且未铺满全屏。

相关代码如下：

基础CSS #

html,
body,
#root {
  background: green;
  padding: 0;
  margin: 0;
}

PWA加载的HTML #

<!DOCTYPE html>
<html translate="no" class="notranslate" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1; viewport-fit=cover" />
    <meta name="mobile-web-app-capable" content="yes" />
    <title>Test</title>
    <meta name="google" content="notranslate" />
    <meta name="description" content="Flink HubOne App" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
    <link rel="mask-icon" href="/mask-icon.png" color="#FFFFFF" />
    <meta name="theme-color" content="#000000" />
  </head>
  <body>
    <div style="background-color: red; flex: 1; padding: 0; margin: 0;">
      <h1>TEST</h1>
      <h1>TEST</h1>
      <h1>TEST</h1>
      <h1>TEST</h1>
      <h1>TEST</h1>
      <h1>TEST</h1>
    </div>
  </body>
</html>

PWA配置 #

{
  "id": "/",
  "name": "Test App",
  "short_name": "Test",
  "description": "Test",
  "theme_color": "#ffffff",
  "display": "fullscreen",
  "scope": "/",
  "start_url": "/"
}

效果说明：页面存在滚动条，红色内容区域未铺满全屏，底部露出绿色背景。

问题根源在于块级元素（如html、body）的默认高度由内容撑开，即使设置了display: fullscreen，也不会自动占满视口高度；另外内部div的flex:1属性因父元素未设置flex布局而失效。

方案1：设置html和body的高度为100% #

修改基础CSS，给html、body和#root添加高度与宽度的强制设置：

html,
body {
  background: green;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
#root {
  background: green;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

方案2：使用视口单位（vh/vw） #

如果需要兼容特殊场景，可用视口单位替代百分比，同时禁止内容溢出滚动：

html,
body,
#root {
  background: green;
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

方案3：结合Flex布局让内部容器铺满 #

若需要红色div占满body高度，给body设置flex布局：

html,
body {
  background: green;
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
}

此时内部div的flex:1会生效，自动占满剩余高度。

内容的提问来源于stack exchange，提问作者user3578870