Menu
I'm trying to get the root view for my Ember application to have full (100%) height, unsuccessfully so far.
Why do I need that? I have a footer which I want aligned to the bottom even if the page content doesn't fill the whole height. To that end, I have the following CSS:
.push {
height: 60px;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
And HTML (using Twitter Bootstrap):
<body>
<div class="navbar navbar-fixed-top"><!-- ... --></div>
<div class="content">
<div class="push"><!--//--></div>
<div class="container">
<!-- page content -->
</div>
<div class="push"><!--//--></div>
</div>
<footer>Copyright ... 2013</footer>
</body>
This works great without Ember. Now, introducing Ember:
<script type="text/x-handlebars" data-template-name="application">
<div class="navbar navbar-fixed-top"><!-- ... --></div>
<div class="content">
<div class="push"><!--//--></div>
<div class="container">
{{outlet}}
</div>
<div class="push"><!--//--></div>
</div>
<footer>Copyright ... 2013</footer>
</script>
And now it no longer works!
The damn thing inserts a <div id="emberXYZ" class="ember-view"> which contains the whole thing, which by itself is quite fine, except that div doesn't have full height and the footer just hangs in the middle of the page right after the content.
I googled around for a solution, but couldn't find anything that would allow me to work around this problem. My guess is the simplest way would be to have Ember set the root view to 100% height (can't seem to find how to do that), but maybe there's some other clever trick that will accomplish what I want. Whatever solution that is, I'd need it to be at least IE8-compatible.
Thanks in advance!
697
I had the same problem trying to get sticky footers to work with Ember JS and Bootstrap. As you noted the issue lies with Ember JS creating the view within a container div that does not get the 100% height.
As Ember only renders 1 immediate child .ember-view to the <body> (i.e. the Application view). We can use this CSS which will work in browsers, including IE8.
/* Works in all browsers, does not effect other views within your application */
body > .ember-view {
height: 100%;
}
It does not effect any .ember-view's that are subviews within your application because they will not be direct children of your page <body>.
175
If you define the application view you can then customize things like the class:
App.ApplicationView = Ember.View.extend({
classNames: ["ember-app"]
})
You can then define your css:
.ember-app {
height: 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
