Question

Ionic似乎在我的视图中添加<div class='fixed-content'>和<div class='scroll-content'>，并且它会创建双边距。它似乎只是添加了很多内容，我假设我可以控制它，我只是不知道如何。

为什么会这样？

我的HTML：

<ion-content>
<ion-grid>
  <ion-row>
    <ion-col >
      <ion-card>
        <ion-card-content>
          <img [src]="client.get_image.before_front_full || '../assets/newred_newblue_outline.png'">
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col>
      <ion-card>
        <ion-card-content>
          <img [src]="client.get_image.before_side_full || '../assets/newred_newblue_outline.png'">
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col>
      <ion-card>
        <ion-card-content>
          <img [src]="client.get_image.after_front_full || '../assets/newred_newblue_outline.png'">
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col>
      <ion-card>
        <ion-card-content>
          <img [src]="client.get_image.after_side_full || '../assets/newred_newblue_outline.png'">
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

渲染内容：

<ion-content class="content content-md">

<!-- DOUBLE MARGIN... WHY?! -->
<div class="fixed-content" style="margin-top: 56px; margin-bottom: 61px;"></div>
<div class="scroll-content" style="margin-top: 56px; margin-bottom: 61px;">
<ion-grid class="fill-height grid">
  <ion-row class="row">
    <ion-col class="col">
      <ion-card class="card card-md">
        <ion-card-content class="card-content card-content-md">
          <img src="http://awaken180-assets.s3.amazonaws.com/clients/before_fronts/000/000/067/original/marty.jpg?1490189112">
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col class="col">
      <ion-card class="card card-md">
        <ion-card-content class="card-content card-content-md">
          <img src="../assets/newred_newblue_outline.png">
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col class="col">
      <ion-card class="card card-md">
        <ion-card-content class="card-content card-content-md">
          <img src="../assets/newred_newblue_outline.png">
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col class="col">
      <ion-card class="card card-md">
        <ion-card-content class="card-content card-content-md">
          <img src="../assets/newred_newblue_outline.png">
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
</div>
</ion-content>

Answer 1

是的，<a href="<?php echo site_url('conuser/edituser/.$row->$id_pegawai'); ?> "> <i class="fa fa-edit"></i></a>同时添加了Ionic2和fixed-content。

scroll-content正如名称所说的那样是页面上的内容是固定的，如果它在顶部和底部都添加了边距，因为你在这个页面上有一个页眉和一个页脚，它正好添加了px需要在设备上留下页眉和页脚的空间。因此，如果您在设备上查看它可能是fixed-content，而不是36px。如果你想测试，删除页脚或标题并再次检查，它将没有边缘顶部或底部。

72px是可滚动内容的位置，在本例中是scroll-content。离子内容中的所有内容都可以滚动并添加到ion-content。

你可以强制使用css（我使用scroll-content类为一些项目添加一个不可滚动的背景图像），但它不是一件好事，因为它会让你的页面上的内容变得更好up，所以如果你的内容正好在标题下面，它可能会在标题后面初始化。

这就是fixed-content创建这些类的原因，它只是为了确保您的可滚动内容在需要的位置正确。

Ionic 2：为什么要添加.fixed-content和.scroll-content

1 个答案: