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兼容。

在此先感谢！

来源

2013-03-26 user510159

为什么不''.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

在这里，我可以做给出两个实际上不涉及到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; 
}

来源

2013-03-26 17:45:18 thecodejack

感谢您的回答。不幸的是，对于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%; 
}

来源

2013-08-03 17:23:36

这是灰烬的方式。 – 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>页面的直接孩子。

来源

2013-11-03 15:58:14 Scott

显然这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%; 
}

我希望这有助于。

来源

2017-05-24 13:23:29

Ember视图高度

回答

相关问题