Html 滚动条上的导航栏高度

我正在angular 6中创建一个简单的导航，我正在使用bem方法和flexbox for css

以下是导航标记：

我们是一个团队 专家。 BDTS波兰公司成立于2014年，专门从事银行、保险、电信、， 高科技、制药、物流和许多其他行业

以下是navbar的移动CSS：

@仅介质屏幕，最大宽度：768px{ .主导航{ 保证金：0； 显示：块； 职位：继承； 高度：自动； 溢出：自动； 背景：白色； } .主导航列表{ 边缘顶部：20px； 显示：无； 弯曲方向：立柱； 证明内容：中心； 对齐项目：居中； } .main-nav___项目：之后{ 内容：； 宽度：1px； } .Navbar_uu切换显示{ 显示器：flex； } .主导航标志{ 位置：相对位置； 底部：49px； 背景重复：无重复； 背景图片：url/assets/images/logo-green.png； } .man-nav__标志-绿色{ 可见性：隐藏！重要； } .主导航条{ 显示器：flex； 证明内容：柔性端； 光标：指针； 填充：26px； 字体大小：50px； 颜色：00964e； 排名：0； 利润上限：-196px； } .主导航链路{ 颜色：444； } } 在桌面版，一切正常：但在移动版，增加滚动条高度，汉堡包菜单消失

以下是我尝试过的解决方案：删除.man nav中的高度

现在导航栏的高度不会在滚动条上增加，但汉堡包菜单消失了

更新-以下是导航栏组件的完整CSS：

@字符集UTF-8； @字体{ 字体系列：icomoon； src:url/assets/fonts/icomoon.ttf； } .主标题{ 宽度：100%； 浮动：左； 显示：块； 最小高度：100vh； 身高：100%； 背景尺寸：封面； 背景位置：中心； 填充底部：100px； 背景图片：url/assets/images/banner.jpg； } .主粘性{ 背景色：白色； 高度：100px； } .main-sticky___标志{ 职位：相对！重要； 背景重复：无重复； 背景图片：url/assets/images/logo-green.png； } .主粘性链接.主导航链接{ 颜色：444！重要； } .主导航{ 位置：粘性； 对齐项目：居中； 证明内容：周围的空间； 左：0； 显示器：flex； z指数：2； 宽度：100%； } .主导航标志{ 位置：相对位置； } .主导航条{ 颜色：白色； } .主导航列表{ 列表样式：无； 显示器：flex； 颜色：白色； 职位：相对！重要； } .主导航项目{ 填充：24px 27px； 位置：相对位置； } .main-nav___项目：之后{ -webkit过渡：所有0.15秒都易于输入输出； 过渡：所有0.15秒缓进缓出； 内容：； 显示：块； 浮动：左； 背景色：F5； 宽度：2倍； 高度：60px； -webkit变换：旋转20度； 变换：倾斜155度； 位置：绝对位置； 右：0； 底部：6px； } .main-nav_uu项：最后一个子项：：之后{ 内容：； 宽度：0px； } .main-nav_uu项：悬停：：之后{ 宽度：calc100%+1px； } .main-nav\u项目：悬停。main-nav\u链接{ 颜色：444； 位置：相对位置； z指数：3； } .主导航链路{ 列表样式：无； 字号：1rem； 颜色：白色； 字体系列：proxima-nova-n6，proxima-nova； 字体风格：普通； 字号：600； } .主导航条{ 显示：无； } .主旗{ 显示器：flex； 证明内容：中心； 弯曲方向：立柱； 对齐项目：居中； } .主旗h2{ 字体大小：3.75rem； 线高：5.375雷姆； 保证金底部：1.5雷姆； 颜色：fff； 字体系列：proxima-nova-n4，proxima-nova； 字体风格：普通； 字体大小：400； 利润上限：70像素； 字体大小：正常； } .主旗{ 字体大小：1.25rem； 字体大小：正常； 颜色：白色； 文本对齐：居中； 最大宽度：700px； 保证金底部：3.375雷姆； 右边距：自动； 左边距：自动； } .main-banner___绿色按钮{ 高度：3.4375雷姆； 背景色：00964e； 文字装饰：无； 颜色：fff； 填充：11px 13px； 显示：内联块； 框大小：边框框； 线高：27px； 边界半径：30px； 边框：3px实心00964e； 字体大小：1.125rem； 右边填充：50px； 字体系列：proxima-nova-n6，proxima-nova； 字体风格：普通； 字号：600； 位置：相对位置； -webkit过渡：所有0.15秒都易于输入输出； 过渡：所有0.15秒缓进缓出； } .main-banner__箭头右：：后{ 字体系列：icomoon； 字体风格：普通； 字体大小：正常； 字体变体：正常； 文本转换：无； 内容： !重要的 字体大小：33px； } .main-banner_u_绿色按钮：：之后{ 浮动：对； 内容：； 显示：块； 宽度：34px； 高度：34px； 左边距：10px； 顶部：10px； 位置：绝对位置； 右：10px； } .main-banner\绿色按钮：悬停{ 背景色：白色； 颜色：绿色； } .main-banner箭头向下{ 变换：旋转90度； 宽度：34px； 高度：34px； 位置：绝对位置； 底部：176像素； 左边距：-17px； 左：50%； z指数：2； -webkit过渡：所有0.15秒都易于输入输出； 过渡：所有0.15秒缓进缓出； 背景图片：url/assets/images/icon-arrow-right.png； } 主粘性{ 背景色：白色； } @仅介质屏幕，最大宽度：768px{ .主导航{ 保证金：0； 显示：块； 职位：继承； 高度：自动； 溢出：自动； 背景：白色； } .主导航列表{ 边缘顶部：20px； 显示：无； 弯曲方向：立柱； 证明内容：中心； 对齐项目：居中； } .main-nav___项目：之后{ 内容：； 宽度：1px； } .Navbar_uu切换显示{ 显示器：flex； } .主导航标志{ 位置：相对位置； 底部：49px； 背景重复：无重复； 背景图片：url/assets/images/logo-green.png； } .man-nav__标志-绿色{ 可见性：隐藏！重要； } .主导航条{ 显示器：flex； 证明内容：柔性端； 光标：指针； 填充：26px； 字体大小：50px； 颜色：00964e； /*位置：绝对位置*/ 排名：0； /*底部：36px*/ /*右：28px*/ 利润上限：-196px； } .主导航链路{ 颜色：444； } .main-banner箭头向下{ 显示：块！重要； 位置：初始； 保证金：0自动； 边缘顶部：50px； } .主旗h2{ 文本对齐：居中； }

---

} 有很多东西需要调试，下面是我发现的：

导航条。主导航：

首先，您得到了一个脚本index.js，它将main-nav\u条和main-nav\u列表位置设置为固定在滚动条上。您不需要对所有三个组件都这样做。只需设置主导航，让孩子们继承

接下来，您最好将“高度：自动”更改为“最小高度：125px”，以适合徽标

然后您需要设置nav.main nav overflow-x:hidden，以便在出现溢出错误时消除右侧的滚动条

或者更好的办法是，制作您的徽标本身及其容器。main-nav_uu徽标有一个与高度匹配的固定高度：125px，并让徽标高度：inherit。你需要裁剪你的图像，这样看起来才好看。请参见下一节的原因 您还使用媒体查询覆盖display:flex-to-block。删除该选项，以便能够使用flex属性。之后，您可以执行以下操作：追加到移动媒体查询中

.主导航{ 弯曲方向：行； 柔性包装：包装； 调整内容：灵活启动； 对齐内容：拉伸； 对齐项目：拉伸； } .主导航标志{ 弹性：21.60%； } .主导航开关{ 弹性：21.30%； } .主导航列表{ 弹性：01100%； } 这将为您提供如下结果：

标志。man-nav__;标志绿色：

下一步，你的标志是200x200，有很多透明的边距，用Photoshop或其他东西将你的标志裁剪下来，以固定边距。这将使您的标志，以适应在没有溢出导航栏。在页边样式方面更加灵活 一个肮脏的解决方案是将徽标的容器更改为。main-nav_uu徽标高度：160px，并添加页边空白顶部：-35px。

---

希望这能让你的生活更轻松一点。问候。

您能提供一个仅包含导航和相关CSS的片段/演示吗？您提供的CSS和HTML不足以复制此问题。现在检查更新，我已根据您的要求添加了链接和新代码

.main-nav {
  margin: 0;
  display: block;
  position: inherit;
  overflow: auto;
  background: white;
}

|-----------------------|----------|
|        Logo           |   Bars   |
|-----------------------|----------|
|                                  |
|             Nav ul               |
|                                  |
|----------------------------------|