调整移动版firefox的主视窗大小

Question

我一直在寻找一种方法来调整移动设备的主视窗大小，以适应页面底部的导航栏。我希望所有的内容都能在页面顶部和导航栏顶部之间可见(CSS3 100vh在移动浏览器中不恒定)

这段代码适用于所有桌面浏览器和所有移动浏览器，除了firefox

html,
body {
height: 100%;
}
#hero {
height: calc(100vh - calc(100vh - 100%));
background-color: aqua;
}

为什么我在火狐手机上得到不同的行为?谢谢你看

Answer 1

在等待澄清的同时，这里有一个示例/模板，可以通过网格做你想要的(如果你对它更有信心，它可能是灵活的)。

html,
body,
body > div {
height: 100%;
margin: 0;
}
body > div {
display: grid;
grid-template-rows: 1fr auto;
}
nav {
background: blue;
padding: 1em;
order: 1;
}
main {
overflow: auto;
}

<div>
<nav>At the bottom , of any height.</nav>
<main> let me scroll if too <br><br><br><br><br><br><br><br>...<br><br><br><br><br><br><br>....<br><br><br><br><br><br><br><br>....<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>....<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>....<br><br><br><br><br><br><br><br><br><br>....short</main>
</div>