Question

我正试图让我的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兼容。

提前致谢！

Answer 1

我遇到了同样的问题，试图让粘性页脚与Ember JS和Bootstrap一起使用。正如您所指出的那样，问题在于Ember JS在容器div内创建了一个不能达到100％高度的视图。

由于Ember仅将1个直接子.ember-view呈现给<body>（即应用程序视图）。我们可以使用这个可以在浏览器中使用的CSS，包括IE8。

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

它不会影响您应用中的任何.ember-view个子视图，因为它们不是您网页<body>的直接子级。

Answer 2

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

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

然后你可以定义你的css：

.ember-app {
    height: 100%;
}

Answer 3

在这里，我可以给出两个与Ember.JS实际上没有关系的答案 1）如何将EMberApp高度的根元素设置为100％ - 您不需要在Ember应用程序代码中进行任何调整。在CSS中，只需将ember-view类高度设置为100％。

.ember-view {
 height: 100%;
}

如果你想避免使用这种样式的其他视图，你可以使用视图的id，因为你在这里指定了一个emberXYZ。

但你的实际要求是 2）使页脚仅占据页面的底部 - 您实际上可以设置页脚absolute并将bottom值设置为0。

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

Answer 4

我最近碰到了这个问题，我花了一些时间来修复它，我只是想与你们分享我的解决方案。

＆＃34; ember-cli＆＃34;：＆＃34; 2.13.1＆＃34;
＆＃34; bootstrap＆＃34;：＆＃34; ^ 4.0.0-alpha.6＆＃34;

正如user510159所写，问题在于正在设置的ember-view类
Scott将height: 100%;属性添加到ember-view类的解决方案是解决方案的一半。

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

为了在我的情况下工作，我必须为我的html的内部div元素设置高度属性。

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

sccs：

#header {
    height: 20%;
}

#content{
    height: 70%;
}

#footer {
    height: 10%;
}

我希望这会有所帮助。

灰烬视图高度

4 个答案: