响应式固定顶部导航栏在展开时会填满屏幕，隐藏一些导航链接，并且不会滚动
responsive fixed-top navbar when expanded fills up screen, hides some of the nav-links, and does not scroll
我创建了一个固定顶部 bootstrap 4 导航栏，它在大屏幕上展开，在其他屏幕上折叠。我还在 <body> 中添加了 padding-top 以防止导航栏与主体内容重叠。
但是，在较小的屏幕上，当使用汉堡包按钮展开折叠的导航栏时，它会展开并填满屏幕。一些导航链接然后变得隐藏（即在显示之外）。而且，滚动不会滚动导航栏，只会滚动导航栏下方的主体内容。
是否可以将导航栏压缩到不超过屏幕大小？或者，如何启用可滚动的导航栏？
在下面添加图片以显示问题。
这是移动视图中未展开导航栏的快照：
这里是说明导航栏占据整个视口的问题的快照，并且仍然有链接但 "outside" 显示：
如果需要，这里是 JSFiddle：
https://jsfiddle.net/suhaib47/ef37ht06/6/
编辑：
使用@Zim 提供的答案后，我现在面临一个不同的问题。在桌面屏幕中，导航栏正确显示。但是，当我单击弹出打开下拉列表的 nav-items/nav-links 时，下拉列表保留在导航栏内，并且有一个用于滚动导航栏的滚动条。如何让下拉菜单显示在导航栏内容之上，同时它可以滚动，但只能在导航栏折叠时滚动。
我附上了一张图片来说明我的意思：
图中看到的滚动条是导航栏的。
在 .navbar-collapse 上设置一个最大高度，该高度等于视口高度减去主体顶部内边距...
body {
overflow: hidden;
}
.fixed-top .navbar-collapse {
max-height: calc(100vh - 4.5em);
overflow-y: auto;
}
我创建了一个固定顶部 bootstrap 4 导航栏，它在大屏幕上展开，在其他屏幕上折叠。我还在 <body> 中添加了 padding-top 以防止导航栏与主体内容重叠。
但是，在较小的屏幕上，当使用汉堡包按钮展开折叠的导航栏时，它会展开并填满屏幕。一些导航链接然后变得隐藏（即在显示之外）。而且，滚动不会滚动导航栏，只会滚动导航栏下方的主体内容。
是否可以将导航栏压缩到不超过屏幕大小？或者，如何启用可滚动的导航栏？
在下面添加图片以显示问题。
这是移动视图中未展开导航栏的快照：
这里是说明导航栏占据整个视口的问题的快照，并且仍然有链接但 "outside" 显示：
如果需要，这里是 JSFiddle： https://jsfiddle.net/suhaib47/ef37ht06/6/
编辑：
使用@Zim 提供的答案后，我现在面临一个不同的问题。在桌面屏幕中，导航栏正确显示。但是，当我单击弹出打开下拉列表的 nav-items/nav-links 时，下拉列表保留在导航栏内，并且有一个用于滚动导航栏的滚动条。如何让下拉菜单显示在导航栏内容之上，同时它可以滚动，但只能在导航栏折叠时滚动。
我附上了一张图片来说明我的意思：
图中看到的滚动条是导航栏的。
在 .navbar-collapse 上设置一个最大高度，该高度等于视口高度减去主体顶部内边距...
body {
overflow: hidden;
}
.fixed-top .navbar-collapse {
max-height: calc(100vh - 4.5em);
overflow-y: auto;
}