带有内容的导航栏 - 如何保持 100vh 大小？

Question

下面是我正在努力解决的问题的再现。

演示：https://jsfiddle.net/5n4Lhgbt/

如您所见，section div 略高于 100vh（已添加导航栏的高度并出现滚动条）。我想避免它。我所说的情况如下图所示：

一些信息：

• 导航栏的高度是动态的 - 它可能更高，取决于里面的徽标，
• 在部分容器上使用overflow: hidden 不满足我，

感谢您的帮助。

Answer 1

您只需添加到您的#section ：

  flex: 1;
  overflow: auto;

这就是诀窍：JSFIDDLE

Answer 2

将您的 #section css 更改为：

#section {
  width: 100%;
  height: calc(100% - 3.25rem);
  background-color: green;
}

这将从部分中减去导航栏高度，使其高度等于剩余空间。