离子头与离子含量重叠 离子3

Question

到目前为止,我有一个非常简单的应用程序,但我无法弄清楚如何修复内容的重叠(标题在内容的顶部).我创建了一个header包含标题的组件,如名称所示.

了header.html

<ion-header>
    <ion-navbar color="dark">
        <ion-title>
            Some Title
        </ion-title>
    </ion-navbar>
</ion-header>

我一直试图在不同的页面上使用它,但它总是重叠页面的内容.

page.html中

<app-header></app-header>

<ion-content padding>
    <h1>Some Page</h1>
</ion-content>

我尝试使用div标签代替ion-content,并尝试使用class="has-header",但似乎没有任何工作.虽然,如果不使用header如下的组件,它可以正常工作.但是我想使用它header作为一个组件,以便我可以在其他页面上重用它.

page.html(不想这样)

<ion-header>
    <ion-navbar color="dark">
        <ion-title>
            Some Title
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <h1>Some Page</h1>
</ion-content>

Answer 1

尝试以下：

<app-header></app-header>
<ion-content style="margin-top:__px">
<h1>Some Page</h1>
</ion-content>