Html 余烬视图高度

我正在尝试使我的余烬应用程序的根视图具有完整（100%）高度，但迄今为止未成功

为什么我需要这个？我有一个页脚，我想对齐的底部，即使页面内容没有填补整个高度。为此，我有以下CSS：

.push {
  height: 60px;
}

.content {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;
}

和HTML（使用Twitter引导）：

版权。。。2013

这在没有余烬的情况下非常有效。现在，介绍余烬：

<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>

{{outlet}}
版权。。。2013

现在它不再工作了

<该死的东西插入一个<代码> <代码>，它包含整件东西，除了DIV没有完全的高度，页脚正好挂在页面的正中间。 我在谷歌上搜索了一个解决方案，但找不到任何可以让我解决这个问题的方法。我猜最简单的方法是让Ember将根视图设置为100%高度（似乎找不到如何做到这一点），但也许还有其他一些聪明的技巧可以实现我想要的。无论是什么解决方案，我都需要它至少与IE8兼容

---

提前谢谢

在这里，我可以给出两个与Ember.JS无关的答案
1） 如何将Ember应用程序高度的根元素设置为100%——无需在Ember应用程序代码中进行任何调整。在CSS中，只需将ember view类高度设置为100%

.ember-view {
 height: 100%;
}

如果要避免使用此样式的其他视图，可以使用此处指定的视图id u

emberXYZ

但您的实际需求是
2） 使页脚只占据页面底部——实际上，您可以将页脚

设置为绝对值

，并将

底部

值设置为

0

footer {
position:absolute;
bottom: 0px;
}

---

如果定义应用程序视图，则可以自定义类：

App.ApplicationView = Ember.View.extend({
    classNames: ["ember-app"]
})

然后，您可以定义css：

.ember-app {
    height: 100%;
}

---

我在尝试使用Ember JS和Bootstrap时遇到了同样的问题。正如您所注意到的，问题在于Ember JS在容器

div

中创建的视图没有获得100%的高度

As Ember仅将一个直接子级

.Ember视图

呈现给

（即应用程序视图）。我们可以使用这个CSS，它可以在浏览器中工作，包括IE8

/* Works in all browsers, does not effect other views within your application */
body > .ember-view {
    height: 100%;
}

---

它不会影响应用程序中属于子视图的任何

.ember视图，因为它们不是页面的直接子视图
我最近遇到了这个问题，我花了一些时间来解决它，我只想与大家分享我的解决方案

“ember cli”：“2.13.1”

“引导”：“^4.0.0-alpha.6”

如前所述，问题在于正在设置的ember view类。



从中添加
高度的解决方案：100%属性是解决方案的一半。








为了在我的例子中工作，我必须为html的内部
div
元素设置高度属性

<div class=ember-view>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

我希望这有帮助。
为什么不
.container>div{min height:100%；}
？不幸的是，这没有帮助。如果
content
已将最小高度设置为100%，则问题不在于
容器。问题是余烬视图div没有占据整个高度。哦，你是说应用程序视图。App.ApplicationView=Ember.View.extend（{classNames:['my-class']}）你一定是在开玩笑吧！对那正是我要找的！App.ApplicationView引用根视图的记录究竟在哪里？谢谢你的回答。不幸的是，对于1），在ember view类中设置高度将与所有其他视图相混淆，并且id中的XYZ部分是动态的（可以用这种方法解决，但我需要找到一种方法将固定id添加到根ember视图中——似乎没有文档记录）。对于2），使用绝对位置有点作弊。我是否可以在没有绝对值的情况下执行此操作，但使用的方式要比上面使用Ember时更好？要为Ember视图指定特定的元素ID，可以设置
elementId
属性。显然，根据HTML，它在页面上必须是唯一的。显然这两种解决方案不起作用。simple.ember视图{height:100%}也没有。我可以在inspector中看到ember view类div。有什么想法吗？只是想让大家知道，这个解决方案对我很有效。对于Ember v1.11，我首先必须覆盖默认的Ember根元素Ember.Application.create。然后将我的rootElement设置为100%宽度和高度。在这之后，上述解决方案立即起作用。关于第一个解决方案，我认为“类型的第一个”选择器不能通过类名来定位元素？@jurer感谢您指出这一点，我在尝试时一定很幸运。我简化了答案，使用了
body>的通用解决方案。ember view
这是ember方法。
/* Works in all browsers, does not effect other views within your application */
    body > .ember-view {
    height: 100%;
}

<div class=ember-view>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

#header {
    height: 20%;
}

#content{
    height: 70%;
}

#footer {
    height: 10%;
}