11

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

提前致谢！

4

4 回答 4

16

我在尝试让粘性页脚与 Ember JS 和 Bootstrap 一起工作时遇到了同样的问题。正如您所指出的，问题在于 Ember JS 在div没有获得 100% 高度的容器中创建视图。

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

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

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

于 2013-11-03T15:58:14.183 回答
6

如果您定义应用程序视图，则可以自定义类之类的内容：

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

然后你可以定义你的CSS：

.ember-app {
    height: 100%;
}
于 2013-08-03T17:23:36.967 回答
0

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

.ember-view {
 height: 100%;
}

如果您想避免使用此样式的其他视图，您可以使用视图的 id 作为您在此处指定的一个emberXYZ。

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

footer {
position:absolute;
bottom: 0px;
}
于 2013-03-26T17:45:18.817 回答
0

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

“ember-cli”：“2.13.1”
“引导程序”：“^4.0.0-alpha.6”

因此，正如user510159所写，问题在于正在设置的 ember-view 类。Scott将属性添加到 ember-view 类的

解决方案是解决方案的一半。 height: 100%;

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



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

<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%;
}

我希望这有帮助。

于 2017-05-24T13:23:29.990 回答