带有内容的导航栏 - 如何保持 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;
}

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