css - ion-content 的内容自动填充

Question

我对 .内容会自动填充，我不能将内容留在 .

这是.html

<ion-header class="header-profile">
  <ion-toolbar class="bar-profile">
    <ion-item no-lines class="item-bar-profile">
      <ion-avatar >
        <img class="centered" src="./assets/img/pio.jpg">
      </ion-avatar>
      <span class="user-title centered">Don Pio</span>
      <span class="user-info centered">Alboraya. Spain</span>
    </ion-item>
  </ion-toolbar>
</ion-header>

<ion-content class="content-profile">
  <div>
    <ion-segment [(ngModel)]="profile">
      <ion-segment-button value="info">
        Perfil
      </ion-segment-button>
      <ion-segment-button value="config">
        Configuración
      </ion-segment-button>
    </ion-segment>
  </div>

  <div [ngSwitch]="profile">

    <ion-list *ngSwitchCase="'info'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="./assets/img/pio.jpg">
        </ion-thumbnail>
        <h2>Ruby</h2>
      </ion-item>

    </ion-list>

    <ion-list *ngSwitchCase="'config'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="./assets/img/pio.jpg">
        </ion-thumbnail>
        <h2>Luna</h2>
      </ion-item>
    </ion-list>
  </div>
</ion-content>

这是 .scss 样式表

 page-profile {

      ion-avatar img {
        width: 80px !important;
        height: 80px !important;
      }

      .user-title {
        color: white;
        font-size: large;
        font-weight: bold;
      }
      .user-info{
        color: white;
        font-size: smaller;
      }
      .centered{
        margin-left: auto;
        margin-right: auto;
        display: block;
        text-align: center;
      }

      .header-profile{
        height: 150px;
      }

      .bar-profile{
        height: 150px;
      }

      .bar-profile .toolbar-background {

        background-size: cover;
        background-image: url('../assets/img/pio.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        background-color: black;
        opacity: .5;
      }

      .item-bar-profile{
        background-color: transparent;
      }
      .content-profile{
        top:150px;
        background-color: lightgrey;
      }
    }

这是一个屏幕截图，用于查看片段如何填充到中心。

这才是正确的视觉效果

有什么问题吗？

Answer 1

请尝试使用此 css

.content-profile{
    top:0px !important;
    background-color: lightgrey;
    padding: 0px !important;
  }