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

【问题标题】：Ionic 2: Why does it add .fixed-content and .scroll-contentIonic 2：为什么要添加 .fixed-content 和 .scroll-content
【发布时间】：2017-05-03 14:51:38
【问题描述】：

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>

【问题讨论】：

标签： ionic-framework ionic2

【解决方案1】：

是的，Ionic2 添加了 fixed-content 和 scroll-content。

fixed-content 顾名思义是页面上的内容是固定的，如果它同时在顶部和底部添加边距，那是因为您在此页面上有页眉和页脚，它准确地添加了px 需要在设备上为页眉和页脚留出空间。因此，如果您在设备上查看它可能是36px，在另一个设备上它是72px。如果要测试，请删除页脚或页眉并再次检查，它不会有顶部或底部边距。

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

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

这就是Ionic2 创建这些类的原因，只是为了确保您的可滚动内容正确地出现在需要的位置。

【讨论】：

如何使用 CSS 在固定内容滚动内容类中删除这个 style=bottom-margin:134px ？因为对于其中一个选项卡，我通过服务tabs[key].style.transform = 'translateY(156px)'; 隐藏了选项卡页脚，即使我在此选项卡的模板中有一个 ion-header，内容也会一直填充到顶部。它只是设备旋转的底部。我似乎无法用 CSS 定位它
我在 Platform.resize 上尝试了 Content.resize 但它似乎没有解决问题，也许是因为填充整个屏幕的实际内容来自子组件？所以这个 content.resize 没有向下传播？？？
我通过在 Platform.resize 上再次调用我的 TabsService.Hide() 摆脱了底部边距，它也执行 `scrollContent[key].style.marginBottom = '0';` 如果你有一个我想测试的所有 CSS 方法。谢谢。