Ember视图高度
我试图让我的Ember应用程序的根视图具有完整(100%)的高度,迄今为止失败。Ember视图高度
为什么我需要这个?即使页面内容没有填充整个高度,我也有一个页脚,我想将其对齐到底部。为此,我有以下的CSS:
.push {
height: 60px;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
和HTML(使用Twitter的引导):
<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:
<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
1)如何EMberApp高度的根元素设置为100%的答案 - 你并不需要做的灰烬应用程序代码中的任何调整。在CSS中,只需将ember-view类的高度设置为100%即可。
.ember-view {
height: 100%;
}
,如果你想避免其他视图中使用这个造型,你可以使用的视图的ID为u这里指定一个emberXYZ
。
但你的实际需求为
2)制作页脚只拿page--实际上,你可以让页脚absolute
和bottom
值设置为0
的底部。
footer {
position:absolute;
bottom: 0px;
}
感谢您的回答。 不幸的是,对于1),在ember-view类中设置高度将与所有其他视图混淆在一起,并且id中的XYZ部分是动态的(可以通过这种方式解决,但我需要找到一种方法将一个固定的ID添加到根Ember视图 - 似乎没有记录)。对于2),使用绝对位置是有点作弊。任何方式我都可以做到这一点,没有绝对的,但以一种比Ember更好的方式做到这一点。 – user510159 2013-03-26 20:02:55
要将特定的元素ID分配给一个花括号视图,你需要设置'elementId'属性。显然,按照HTML,它必须在页面上是唯一的。 – 2013-11-03 19:22:37
如果定义应用程序视图然后你可以自定义的东西,如类:
App.ApplicationView = Ember.View.extend({
classNames: ["ember-app"]
})
然后,您可以定义你的CSS:
.ember-app {
height: 100%;
}
这是灰烬的方式。 – FutoRicky 2016-07-02 22:18:11
我有同样的问题努力得到粘脚,与Ember JS和Bootstrap一起工作。正如你所指出的,问题在于Ember JS在一个容器内创建视图,该容器不能达到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>
页面的直接孩子。
显然这2个解决方案不起作用。简单的.ember-view {height:100%}也不是。不过,我可以在检查器中看到ember-view class div。有任何想法吗 ?无论如何, – 2015-01-24 11:50:04
没有工作。必须在ember-view类中使用flex。 – 2015-01-24 14:23:06
只是为了让人们知道,这个解决方案为我工作。对于Ember v1.11,我首先必须覆盖默认的ember rootElement Ember.Application.create。然后将我的rootElement设置为100%的宽度和高度。之后,上述解决方案立即工作。 – 2015-06-14 11:47:43
我最近遇到了这个问题,我花了一些时间来修复它,我只是想与你们分享我的解决方案。
“烬-CLI”: “2.13.1”
“引导”: “^ 4.0.0-alpha.6”
因此,作为user510159写道,问题在于这是余烬视图类被设置。
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%;
}
我希望这有助于。
为什么不''.container> div {min-height:100%; ''? – 2013-03-26 17:47:14
不幸的是,这并没有帮助。如果“内容”已经将最小高度设置为100%,则问题不是“容器”。问题是不支持完整高度的ember-view div。 – user510159 2013-03-26 19:59:04
哦,你的意思是应用程序视图。 App.ApplicationView = Ember.View.extend({classNames:['my-class']}) – 2013-03-26 20:09:56