离子子页脚不固定在底部 [英] Ionic sub-footer not fixed at bottom

问题描述

我创建了一个页脚和一个子页脚来显示参数。现在我的页脚停留在底部，但子页脚正好在内容之后。或者有些时候它是内容的后面。< div id =contentui-view>< / div> 加载内容，我已经使用了ion-footer。

I have created a footer and a sub-footer to show parameters. Now my footer stays at bottom but the sub footer is going exactly after the content. Or some times it is going behind content.<div id="content" ui-view></div> loads the content and I have used ion-footer.

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>

推荐答案

我得到了sub footer的解决方案。其实我的执行是错误的。小页脚将按照以下方式实施。可能对任何其他人都有用。

I got the solution of sub footer. Actually my implementation was wrong. Sub footer is to be implemented in following way. might be useful for any one else.

<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>

这篇关于离子子页脚不固定在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！