Styling the main outlet in Ember

Question

I have a layout that requires the main outlet to be 100% of the height of the page.

Here's a JSFiddle showing the issue I'm having. I can create the index view and assign css classes to it via the classNames property, but there is always that root div that I don't understand how to style.

http://jsfiddle.net/kgnQz/

Here is what the body looks like from the jsfiddle

<div id="ember153" class="ember-view"> <!-- Need style here -->
    <script id="metamorph-0-start" type="text/x-placeholder"></script>
        <div id="ember161" class="ember-view indexViewClass">
            This is the index view
        </div>
    <script id="metamorph-0-end" type="text/x-placeholder"></script>
</div>

Normally when I create a view, I can provide classaNames: ['whatever'] to apply CSS classes, but how do I go about styling the main outlet to be 100% of the page?

Things I have tried:

1. Creating an application view, however it is still wrapped by the main outlet code.
2. Using rootElement in Ember.Application.create({}); to specify a styled element, however that just inserts a child view where all my content goes that is 100% and creates a parent div with the same problem, just one level deeper.
3. Creating an application view and styling that in the same way I am styling the IndexView.

I tried researching this and it's a tough one for me to figure out... any ideas? I must be missing something simple because every time I figure something out i realize i was over-analyzing it or forcing Ember to do something in a way it wasn't mean to be done.

Answer 1

any alternatives to Ember.View because it is deprecated and will be removed in ember 2

Answer 2

you can use ApplicationView to style your main div...

App.ApplicationView = Ember.View.extend({
  classNames: ['test']
});

See http://jsbin.com/uxojek/5/edit

 <div id="ember156" class="ember-view test">
    <script id="metamorph-0-start" type="text/x-placeholder"></script><div       id="ember164" class="ember-view indexViewClass">
   This is the index view 
 </div><script id="metamorph-0-end" type="text/x-placeholder"></script>
 </div>