Ionic 2：固定コンテンツと.scroll-contentを追加する理由

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

はい、Ionic2はfixed-contentとscroll-contentの両方を追加します。

fixed-contentの名前は固定されているページのコンテンツだと言っています。このページにヘッダーとフッターがあるため、上下に余白を追加すると正確にpxの量が追加されますヘッダーとフッターのスペースをデバイスに残す必要があります。あなたは、デバイス上でチェックすると、それは72pxのだanothe上だから、36pxかもしれません。テストする場合は、フッターやヘッダーを外してもう一度チェックしてください。上端または下端に余白がありません。

scroll-contentは、スクロール可能なコンテンツ（この場合はion-content）です。イオン内容のすべてがスクロール可能で、scroll-contentに追加されています。

強制的にCSSにすることができます（私はfixed-contentクラスを使用して、いくつかのプロジェクトにスクロール不可能な背景イメージを追加します）。ページ上のコンテンツが上がるのでヘッダーのすぐ下にコンテンツがある場合は、ヘッダーの後ろに初期化されます。

Ionic2は、これらのクラスを作成し、だから、なぜ、それはちょうどそれがする必要がある場合、あなたのスクロール可能なコンテンツは、右行くことを確実にするためですです。