离子含量与离子头重叠答案

【问题标题】：ion-content overlaps with ion-header离子含量与离子头重叠
【发布时间】：2020-08-01 23:45:28
【问题描述】：

以下是我的配置。

Ionic:

   Ionic CLI                     : 6.6.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.0
   @capacitor/core : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.0.0

System:

   Android SDK Tools : 26.1.1 (/Users/kishorpawar/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v12.12.0 (/usr/local/Cellar/node/12.12.0/bin/node)
   npm               : 6.11.3
   OS                : macOS Catalina
   Xcode             : Xcode 11.4.1 Build version 11E503a

this doc 表示以下内容。

。

但是，我的ion-content 仍然与ion-header 重叠

我正在尝试 this usage example 和 ion-virtual-scroll。我在论坛上尝试了fullscreen、padding、has_header 和其他解决方案，包括旧的离子版本。

我的app.component.html 中有以下代码。

<ion-app>
    <ion-header [translucent]="true">
      <ion-toolbar>
        <ion-title size="medium">
          <ion-img [src]="header_logo" height="150" width='150'></ion-img>
        </ion-title>
      </ion-toolbar>
    </ion-header>

  <ion-router-outlet></ion-router-outlet>
<ion-app>

ion-content 存在于每个组件中。

【问题讨论】：

标签： angular cordova ionic-framework hybrid-mobile-app ionic5

【解决方案1】：

我在ionic-forum 上发布了同样的问题，来自 ionic-team 的Mike Hartington 回复了以下内容。

你好！所以这实际上不是你应该如何构建你的 DOM。

ion-header 在这种情况下并不意味着是“全局”组件。它应该包含在您的所有页面中。这可能就是你为什么有问题。

所以基本上，我必须将 ion-header 从 app.component.html 移动到我将要构建的每个页面。

【讨论】：