離子子頁腳不固定在底部

Question

我創建了頁腳和子頁腳來顯示參數。現在我的頁腳停留在底部，但子頁腳正好在內容之後。或者有些時候它正在落後於內容。加載內容並使用了離子頁腳。

https://jsfiddle.net/sweety1112/wag7ye4b/15/

<div class="bar-subfooter" class="bar-assertive"> <div class="modeContainer"> 
<div class="mode modeText "> 
     <div class=""> 
     Mode: 
     <p> Modulated Mode </p> 
     </div> 
</div> 

<ion-footer-bar> 

    <div class="bottomcontainer"> 
      <span class="fontClass"> 
       Intensity: 
       <p> Low </p> 
      </span> 
      <div class="vertical-line">&nbsp;</div> 
      <span class="fontClass"> 
       Duration: 
      <p> 20 Min </p> 
      </span> 
      <div class="vertical-line">&nbsp;</div> 
      <span class="fontClass"> 
       OnTime: 
      <p> 10 Sec </p> 
      </span> 
      <div class="vertical-line">&nbsp;</div> 
      <span class="fontClass"> 
       OffTime: 
       <p> 10 Sec </p> 
      </span> 
    </div> 

Answer 1

我子頁腳的解決方案。其實我的執行是錯誤的。小頁腳將按照以下方式實施。可能對其他人有用。

<ion-footer-bar class="bar-subfooter" class="bar-assertive">  <div class="modeContainer">  
<div class="mode modeText "> 
     <div class=""> 
     Mode: 
      Modulated Mode 
     </div>  </div>  </div> </ion-footer-bar>  <ion-footer-bar> 

    <div class="bottomcontainer"> 
      <span class="fontClass"> 
       Intensity: 
       Low 
      </span> 
      <div class="vertical-line">&nbsp;</div> 
      <span class="fontClass"> 
       Duration: 
       20 Min 
      </span> 
      <div class="vertical-line">&nbsp;</div> 
      <span class="fontClass"> 
       OnTime: 
      10 Sec 
      </span> 
      <div class="vertical-line">&nbsp;</div> 
      <span class="fontClass"> 
       OffTime: 
       10 Sec 
      </span> 
    </div>