イオン含有量がイオン含有量の範囲内にある固定されたdiv

Question

私は一束のレコードを列挙し、一番下にフッタが固定された構成要素を持っています。

list-component footer { 
    position: fixed; 
    bottom: 10px; 
} 

このコンポーネントはいくつかのページで使用されるため、レンダリングされるとフッターはイオンコンテンツエレメント内で終了します。ブラウザ上に示され、また、Androidデバイスではなくフッタは奇妙ように動作iOSデバイス上に表示されたとき（それは内容でスクロールするとき（底部に固定された）予想通り

<my-page> 
    <ion-content> 
     <div class="scroll-content"> 
      <list-component> 
       <!-- component contents --> 
       <footer> 
        <!-- footer contents --> 
       </footer> 
      </list-component> 
     </div> 
    </ion-content> 
</my-page> 

フッタは振る舞いますion-content）、その固定位置に戻ります）。

フッタはion-contentから移動すると正常に動作することがわかりますが、これはいくつかのページで使用されているコンポーネント内にあり、ion-contentはコンポーネントではなくページに含まれていると説明しました。

フッターをイオン含有量から移動させることなくこの作業を行う方法はありますか？

Answer 1

この問題への直接的な解決策はありませんように見えます。

私は他の人々の参照のために説明しようとしている中間の解決策で解決しました。

すべてのページでフッターコードを複製するというアイデアは好きではなかったので、コンポーネントを2つに分割しました.1つはリスト用、もう1つはフッター用です。

また、2つのコンポーネントを接着するビューモデルクラスも追加しました。

最終的な解決策は、次のようになります

<my-page> 
    <ion-content> 
     <list-component [(footer)]="footer"> 
     </list-component> 
    </ion-content> 
    <footer-component [footer]="footer"></footer-component> 
</my-page> 

だから、フッター要素が固定位置がiOSの上で中断されませんので、ion-content外にかかっています。

ビューモデルは、list-componentと双方向にバインドされており、フッターデータがリストコンポーネント内で変更されたときにフッターコンポーネントが自動的に更新されるように、footer-componentへの一方向にも注意してください。

Answer 2

私はあなたの質問を完全に理解していますが、私はthiknkはコメントしませんが、これはあなたを助けるかもしれません。 <footer></footer>の周りに<div ion-fixed class="fixed-content"></div> をラップしてみてください。

は、例えば：

<my-page> 
    <ion-content> 
    <div class="scroll-content"> 
     <list-component> 
      <!-- component contents --> 
      <div ion-fixed class="fixed-content"> 
       <footer> 
        <!-- footer contents --> 
       </footer> 
      </div> 
     </list-component> 
    </div> 
    </ion-content> 
</my-page>