Angular应用mdb navbar页面刷新时高度随机变大如何解决？

这个问题的核心原因是MDB Navbar初始化计算高度时，DOM、样式未完全加载，或路由切换后动态内容渲染未触发Navbar的尺寸重算；打开Chrome控制台会触发resize事件，Navbar监听该事件重新计算尺寸所以自动恢复正常，可通过以下方案解决：

方案1：强制固定Navbar高度（最稳定） #

直接给Navbar指定固定高度，从根源上避免高度被异常撑开，在Header组件的样式文件中添加以下代码：

/* 桌面端高度 */
mdb-navbar {
  height: 56px;
  overflow: hidden;
}

/* 导航文字垂直居中对齐 */
.navbar-nav .nav-link {
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
}

/* 移动端适配，可根据实际需求调整 */
@media (max-width: 991px) {
  mdb-navbar {
    height: 48px;
  }
  .navbar-nav .nav-link {
    line-height: 48px;
  }
}

如果使用了折叠菜单，可调整移动端高度适配折叠后的布局。

方案2：手动触发尺寸重算 #

在视图渲染完成、路由切换完成后主动触发resize事件，模拟打开控制台的修复逻辑：

2.1 组件初始化时触发 #

在Header组件的TS文件中添加AfterViewInit钩子逻辑：

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 等待DOM渲染完成后触发resize，强制Navbar重算尺寸
    setTimeout(() => {
      window.dispatchEvent(new Event('resize'));
    }, 0);
  }
}

2.2 路由切换时触发 #

如果动态内容是路由加载的，在app.component.ts中监听路由结束事件，每次切换路由后触发重算：

import { Component, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      setTimeout(() => {
        window.dispatchEvent(new Event('resize'));
      }, 0);
    });
  }
}

方案3：补全自定义样式配置 #

检查你自定义的fill-remaining-space类是否配置正确，该类用于填充导航栏左右菜单的空白，缺少flex属性会导致布局计算异常，补充样式：

.fill-remaining-space {
  flex: 1 1 auto;
}

内容的提问来源于stack exchange，提问作者finisinfinitatis