Фиксированная нижняя панель в ионной

Question

Я хочу иметь фиксированную нижнюю панель внизу страницы. Когда я поставил

<ion-footer-bar class="bar-dark"></ion-footer-bar> 

в конце

<ion-nav-bar class="bar-balanced"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 
</ion-nav-bar> 
<ion-nav-view> 
    Loading... 
</ion-nav-view> 

в моей index.html он работает правильно, но тогда я колонтитул на каждой странице. Я хочу это только ниже одной конкретной страницы. При добавлении строки в этом файле

<ion-view view-title="Projects"> 
<ion-content class="padding"> 
    <ion-list> 
     <div> 
      <h1 class="ft-size-small ft-color-base">Projects</h1> 
     <div> 
     <ion-item ng-repeat="project in $ctrl.projects" href="#/project/{{project.id}}"> 
      <div class="item-button-right"> 
      <h2 ng-bind="project.name"></h2> 
      <button class="button button-clear"> 
       <i class="icon ion-ios-information-outline"></i> 
      </button> 
      </div> 
     </ion-item> 
     <div class="text-center"> 
      <button class="button button-clear ft-color-green"> 
       Create project 
      </button> 
     </div> 
    </ion-list> 
</ion-content> 
<ion-footer-bar class="bar-dark"></ion-footer-bar> 

Это просто перекрывает вид списка, а не всю страницу. Это также происходит, когда я добавляю его непосредственно под ионным списком. Что я могу сделать?

Редактировать: Добавить изображение, чтобы показать неправильную раскладку:

Это то, что он должен выглядеть следующим образом:

Answer 1

<h1> вызывает проблему:

<div> 
    <h1 class="ft-size-small ft-color-base">Projects</h1> 
<div> 

Если вы положили это выше <ion-list>, тогда это должно быть исправлено