解决Ionic中ion-router-outlet内容被ion-toolbar覆盖的问题

1. Ionic布局规范冲突：Ionic不允许嵌套ion-content组件，每个ion-content都自带独立的滚动容器和布局计算逻辑，嵌套后会导致内边距、滚动行为等布局规则混乱，这是核心问题。
2. 工具栏位置错误：把ion-toolbar放在ion-content内部的grid中，外层ion-content无法自动识别工具栏高度，不会给内部内容添加对应顶部内边距，导致路由出口的内容被上方工具栏遮挡。

方法一：遵循Ionic布局规范（推荐） #

步骤1：调整app.component.html结构 #

将ion-toolbar移到ion-content外部，用ion-header包裹，Ionic会自动为下方的ion-content计算并设置正确的顶部内边距：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-grid>
    <!-- nav bar is the menu, menu is the nav bar -->
    <app-nav-bar></app-nav-bar>
    <ion-row><ion-router-outlet id="menuContent"></ion-router-outlet></ion-row>
  </ion-grid>
</ion-content>

步骤2：移除login组件的嵌套ion-content #

外层已经有ion-content作为滚动容器，login组件不需要再嵌套ion-content，直接保留内部布局即可：

<ion-grid>
  <ion-segment>
    <ion-segment-button><ion-label>Login</ion-label></ion-segment-button>
    <ion-segment-button><ion-label>New Password</ion-label></ion-segment-button>
  </ion-segment>
  <form>...</form>
</ion-grid>

方法二：手动调整内边距（备选，不推荐长期使用） #

如果暂时无法修改外层布局，可以给login组件的ion-content添加顶部内边距，手动避开工具栏高度：

/* login组件的样式文件 */
ion-content {
  --padding-top: 64px; /* 对应Ionic默认工具栏高度，可根据实际情况调整 */
}

• 单纯调整grid、row、col无法解决问题，因为根源是ion-content的嵌套布局冲突和内边距计算逻辑，不是grid的行列布局问题。
• 不需要修改Ionic原生CSS，通过上述规范调整或自定义组件内的样式即可解决，修改原生CSS会导致全局布局混乱，后续版本升级也容易出问题。

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