Sticky footer in ember js

Question

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

`position: fixed; && bottom: 0;` on the footer selector. Have you tried that? — dowomenfart, Apr 06 '15 at 13:03
Here is a [Plunker](http://plnkr.co/edit/jE2Wpsev1dK8oOYimyyU?p=info) to show you the css I needed to get it to work. — The_Dude, Aug 28 '16 at 20:22

score 0 · Answer 1 · answered Apr 06 '15 at 13:14

0

In your css you should add the following properties to your footer

footer {
position: fixed;
bottom: 0;
}

answered Apr 06 '15 at 13:14

IvanJ

645
5
19

I don't want fixed footer. I want to stick the footer to the bottom of page – noamkn Apr 06 '15 at 15:30

Sticky footer in ember js

1 Answers1