Html 快速响应的固定顶部导航栏在展开时会填满屏幕，隐藏一些导航链接，并且不会滚动

我已经创建了一个固定顶部引导4导航栏，它在大屏幕上展开，在其他屏幕上折叠。我还向

添加了

填充顶部

，以防止导航栏与主体内容重叠

但是，在较小的屏幕上，当使用hamburger按钮展开折叠的导航栏时，它会展开并填充屏幕。一些导航链路随后被隐藏（即在显示屏外）。此外，滚动不滚动导航栏，而仅滚动导航栏下方的主体内容

是否可以压缩导航栏，使其占用的空间不超过屏幕大小？或者，如何启用可滚动导航栏

在下面添加图片以显示问题

这是一个不展开导航栏的管理单元移动视图：

下面是一个快照，用于说明导航栏占据整个视口的问题，并且仍然存在链接，但“在”显示之外：

如果需要，这里是JSFIDLE：

---

编辑： 在使用@Zim提供的答案之后，我现在面临一个不同的问题。在桌面屏幕中，导航栏正确显示。但是，当我点击导航项目/nav链接，弹出一个下拉列表时，下拉列表停留在导航栏中，并且有一个滚动条用于滚动导航栏。如何使下拉菜单显示在导航栏内容上，同时可以滚动，但只能在导航栏折叠时滚动

我附上了一张图片来说明我的意思：

---

图中所示的滚动条用于导航栏。

在

上设置最大高度。导航栏折叠

等于视口高度减去车身顶部填充

body {
  overflow: hidden;
}

.fixed-top .navbar-collapse {
  max-height: calc(100vh - 4.5em);
  overflow-y: auto;
}

---

为了更好地理解，你能展示你的工作代码或小提琴吗？@TarangRathod我已经包括了这部作品中的小提琴链接。我开始考虑使用媒体查询来设置<代码>最大高度，但这更好。如果我想在导航栏和屏幕底部之间留一点空间，我应该再减去几个单位，对吗？PS我为没有使用codeply而道歉：）我已经用一个新问题更新了我的问题，关于导航栏链接弹出一个下拉菜单，我在使用你的答案后遇到了这个下拉菜单。我回答了原来的问题。请就导航栏布局问题提出单独的问题（如果没有重复的问题）。请发表评论，以便我以后需要时可以找到此答案：P