我试图获得我的Ember应用程序的根视图,使其全部(100％)的高度,到目前为止还不成功.
为什么我需要这个？我有一个页脚,我想要对齐到底部,即使页面内容没有填满整个高度.为此,我有以下CSS：
.push {
height: 60px;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
和HTML(使用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>
没有Ember,这个工作很棒.现在,介绍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>
现在它不再工作了！
该死的东西插入< div id =“emberXYZ”class =“ember-view”>它包含了整个事情,它本身是非常好的,除了div没有完整的高度,页脚刚刚挂在页面正中间的内容.
我已经搜索了一个解决方案,但找不到任何可以让我解决这个问题的东西.我的猜测是让Ember将根视图设置为100％高度的最简单的方法(似乎不能找到如何做),但也许还有一些其他聪明的技巧将完成我想要的.无论什么解决方案,我需要它至少与IE8兼容.
提前致谢！
解决方法
我有同样的问题,试图让粘性页脚与Ember JS和Bootstrap一起工作.正如您所注意到的那样,Ember JS在容器div中创建不能获得100％高度的视图.
由于Ember仅将1个即时小节的.ember视图呈现到< body> (即应用程序视图).我们可以使用这种可以在浏览器中使用的CSS,包括IE8.
/* Works in all browsers,does not effect other views within your application */
body > .ember-view {
height: 100%;
}
它不会影响任何.ember视图,这是您应用程序中的子视图,因为它们不会是页面的< body>的直接子节点.
