Create a sticky footer using EmberJS and Twitter Bootstrap

November 01, 2013

It took me quite a bit of time to figure out how to do a sticky footer while using both Twitter Bootstrap and EmberJS.  After applying the solution provided by Martin Bean and Ryan Fait found at http://getbootstrap.com/2.3.2/examples/sticky-footer-navbar.html, I found that my footer wasn't sticky at all.  It was still jumping up to the top of the screen.
I found out by inspecting the generated code in the Chrome developer tools that EmberJS also adds a div to the body of the document.  In order to get it all to work I had to add an extra CSS style.  The style I added was:

.ember-view {
  height: 100%;
}

Hopefully this helps someone else out that had the same problem.

The code can be seen in use at http://OmegaYeast.com.  I currently don't have a live page using this code, but trust me that it works.

---

Functional Typescript

• Domain Modeling Made Functional With Typescript
• Simple Types Using Typescript
• Constrained Types Using Typescript
• Using Lambdas To Achieve Currying
• No Hidden Return Types

Recent Posts

• No Hidden Return Types
• Using Lambdas To Achieve Currying
• Constrained Types Using Typescript
• Simple Types Using Typescript
• Blog Rebuild
• > Archives