离子底脚不固定在底部

时间:2015-03-13 08:21:36

标签: jquery html css ionic

我创建了一个页脚和一个子页脚来显示参数。现在我的页脚停留在底部,但是子页脚正好在内容之后。或者有时它会落后于内容。<div id="content" ui-view></div>加载内容并且我使用了离子页脚。

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>

1 个答案:

答案 0 :(得分:0)

我得到了子页脚的解决方案。实际上我的实施是错误的。子页脚将以下列方式实现。可能对其他任何人都有用。

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