use*_*159 11 html height footer ember.js
我试图让我的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兼容.
提前致谢!
Sco*_*ott 14
我有同样的问题试图让粘性页脚与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>.
如果您定义了应用程序视图,则可以自定义类:
App.ApplicationView = Ember.View.extend({
classNames: ["ember-app"]
})
然后,您可以定义您的CSS:
.ember-app {
height: 100%;
}
在这里我可以给出两个实际上与 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;
}