设置 ember-view div 的 CSS 属性答案

【问题标题】：set CSS properties of an ember-view div设置 ember-view div 的 CSS 属性
【发布时间】：2017-01-17 11:33:03
【问题描述】：

我已将 ember 应用程序中 <body> 标记的高度设置为 100vh。现在在我的application/template.hbs 里面，我有一个根<div>。我无法将这个根<div> 的高度设置为100vh，因为最终渲染应用程序时，dom 如下：

<body>
    This is 100% of viewport
    <div id="ember435" class="ember-view">
        This div was automatically generated by ember, and I can't change its height. :/
        <div id="wrapper">This is my div and not 100% of body</div>
    </div>
</body>

【问题讨论】：

用 .ember-view { height: 100%; 添加 CSS 有什么问题？ } ?
ember 中的所有视图都有ember-view 类。这将导致所有这些视图为 100%。我不认为我想要那个，
如果您有多个视图，您始终可以将附加的特定类应用于任何视图，以区别于其他视图。

标签： javascript html css ember.js

【解决方案1】：

.ember-view 默认包含在所有 ember 组件中。所以你可以试试下面的

body > .ember-view{
  height : 100%;
}

参考资料。 https://github.com/emberjs/ember.js/issues/11486

【讨论】：

我猜，你的解决方案是唯一的选择。

【解决方案2】：

您可以定义应用的插入点。

//index.html
<body>
    {{content-for "body"}}

    <script src="{{rootURL}}assets/vendor.js"></script>
    <script src="{{rootURL}}assets/client-web-ember.js"></script>

    <div id="my-app"></div>

    {{content-for "body-footer"}}
  </body>

在

// config/environment.js
ENV.APP.rootElement = '#my-app';

然后根据根元素设置任何样式。

【讨论】：