Why the footer does not fix when i use ion-content

ionic-v1
1 
    <!doctype html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>xcb_m</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="stylesheet" href="assets/tools/ionic/css/ionic.min.css"/>
    <link rel="stylesheet" href="assets/styles/index.css"/>

    <script src="assets/tools/ionic/js/ionic.js"></script>
    <script src="assets/tools/ionic/js/ionic.bundle.js"></script>

    <script src="assets/scripts/index.js"></script>
</head>
<body ng-controller="MainController">

<div class="bar bar-header bar-stable">
    <button class="button icon ion-navicon"></button>
    <h1 class="title">Header Buttons</h1>
    <button class="button">Edit</button>
</div>


<ion-content>
    <div class="list">
        <div class="item">das</div>
        <div class="item">das</div>
        <div class="item">das</div>
        <div class="item">das</div>
        <div class="item">das</div>
        <div class="item">das</div>
        <div class="item">das</div>
        <div class="item">das</div>
        <div class="item">das</div>
        <div class="item">das</div>
        <div class="item">das</div>
        <div class="item">das</div>
    </div>

    <ion-infinite-scroll on-infinite="loadMoreItems()" icon="ion-loading-c">
    </ion-infinite-scroll>
</ion-content>

<div class="bar bar-footer  bar-balanced">
    <button class="button button-clear">Left</button>
    <div class="title">Title</div>
    <button class="button button-clear">Right</button>
</div>
</body>
</html>

image
Pasted image359×720 12.8 KB

Above ,u can see the footer in the center ,not bottom .please tell me why if you know.
Thancks

2

please use
instead of the div-syntax
http://ionicframework.com/docs/api/directive/ionFooterBar/

4

i would prefer you build a codepen with your code (including your index.css).

5

The class ‘title’ can be screwing things up, also have no idea why your ion-footer-bar isn’t even being styled.

    <div class="bar bar-footer bar-balanced">

    <div class="buttons button-bar">
    <a class="button button-clear">Left Button</a>
    </div>
    <div class="buttons button-bar">
        <h1 class="title">Title!</h1>
    </div>
    <div class="buttons button-bar">
    <a class="button button-clear">Right Button</a>
    </div>

    </div>

The above works for me, I’m on beta#13 ion-footer-bar also works for me, so something is being reset/overruled in your css (index.css)

6

Seems to be working fine for me.

7

thanks , i finish it after look your answer