Липкий нижний колонтитул, когда страница не заполнена контентом

Поэтому я предполагаю, что на этом уже много тон, и я извиняюсь, если это дублирование одного. Тогда я просто не мог найти.

Я занят угловым применением, основанным на Ionic framework для тестирования. Теперь то, что я хотел бы выполнить, - это нижний колонтитул, который всегда будет придерживаться нижней части страницы. И почему-то это не так.

Это то, что происходит (оранжевый бар должен действовать как нижний колонтитул.):

И то, что я пытался реализовать, - это решение, очень похожее на стикер Ryanfait.

Мой CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
    margin-bottom: -150px; 
}
.page-wrap:after {
  content: "";
  display: block;
  height: 150px;
}

#mainView #footer {
    height: 150px;
    background: orange;
} 

И затем мой HTML:

<div class="page-wrap">
        <div id="logo-ionic">
            <img src="img/ionic.png" />
        </div>
    </div>

    <div id="footer">
        <!-- Footer content blablabla -->
    </div>

Я признаю, что я бы предпочел не использовать для этого решение javascript.

Благодаря (: