html – Ember视图高度

我试图获得我的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>的直接子节点.

html – Ember视图高度

解决方法

相关推荐