Sticky footer in ember js

I have emberjs application and I tried to create sticky footer.

My html:

<div class="main-container" id="">
  <header> HEADER </header>

  <div class="container">
    {{outlet}}
  </div>

  <footer>
    footer text
  </footer>
</div>

The CSS:

.ember-view {
  height: 100%;
}

.main-container {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -40px;
}

footer {
  clear: both;
  line-height: 40px;
  width: 100%;
}

For unknown reason the footer is still not stick to the bottom.

Any idea?

Thanks a lot :)