在Firefox中等效于-webkit-fill-available效果

Question

我可以在Chrome中使用min-height: -webkit-fill-available填充其余页面。那么如何在Firefox中做到这一点？ -moz-available不能正常工作。

请注意，标头的高度实际上是动态的，我的目标是使标头+ main> = 100vh。

https://jsfiddle.net/tzjoke/seqw0xo2/8/

body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

header {
  height: 20px;
  background: green;
  width: 100%;
}

main {
  min-height: -webkit-fill-available;
  min-height: -moz-available;
  background: red;
  width: 100%;
}

footer {
  height: 50px;
  background: blue;
  width: 100%;
}

  <header>header</header>
  <main>main</main>
  <footer>footer</footer>

有什么CSS方式可以代替编写JS吗？请帮忙。