如何设置页面的剩余高度为100%后,你已经放置了一个导航栏没有得到滚动条[[副本]

问题是:

我已经创建了一个代码沙盒,可以清楚地看到问题所在: https://codesandbox.io/s/weathered-framework-c2251?file=/src/App.js:648-658

我通过选择 html, body and #root 把它的高度设为100%。 这是可行的,但它给了我滚动条,因为我认为它添加了滚动条。

有没有一种方法可以避免这种情况或更好的方法使用另一种技术?基本上:采取所有可用的高度,但不产生滚动条

只是添加了一个溢出:隐藏的作品,但我认为如果我有它的滚动内容(页面增长),它不会显示,所以这不是真正的解决办法。

老实说,我有点生疏了,也许我做错了,但谷歌和这篇文章并没有帮我多少忙 Body height 100% displaying vertical scrollbar

我在这里尝试了第一个答案“flexbox方式”: Make a div fill the height of the remaining screen space

这工作得很好,但当我想一个容器内有滚动的内容,而不滚动整个页面,这是行不通的。它添加了一个滚动条。我编辑了这个例子。