2

我希望我的 ember 应用程序填充视口的高度。它没有按预期工作，因为 ember 在我的 application.hbs 中的 body 标签和我的第一个标签之间放入了一个我无法控制的 div。

我的应用程序.hbs：

<div class='page'>
{{outlet}}
</div>

我的CSS：

body {
  background-color: #ccddee;
  height: 100vh;
  min-height: 100vh;
  margin: 0px;
}
.page {
  width: 780px;
  height: 100%;
  background-color: #F7F7F7;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

但呈现的html是：

<html>
  <body ...>
    <script ....>
    <div id="ember376" class="ember-view">
      <div class=page">
        ......
      </div>
    </div>
  </body>
</html>

我无法控制脚本元素后第一个 div 的样式。（“ember-view”也被许多其他标签使用，我假设“ember376”可能会在我无法控制的情况下更改为另一个数字。）

我正在使用最新的 ember 版本（1.13.5）

4

3 回答 3

1

如果您想专门为应用程序视图元素添加一个类，您可以这样做：

App.ApplicationView = Ember.View.extend({
  classNames: ['full-height']
});

然后css：

.full-height {
    height: 100vh;
}

或者您可以.ember-view使用 CSS 中的直接后代选择器来定位第一个：

body > .ember-view {
    height: 100vh;
}
于 2015-08-10T14:51:08.193 回答
0

最小的 JS 答案。在您的视图模板或应用程序 js 中，添加以下 JavaScript：

document.documentElement.classList.add('full-height');

然后在要定位的元素上为该类定义全高 CSS，（下面的示例）

.full-height > div.ember-view { 
  height: 100vh; 
}
于 2015-08-10T14:53:46.413 回答
0

如果您要做的只是设置脚本标签后的第一个 div 的样式，那么您应该能够在 CSS 中使用相邻兄弟选择器。

script + div {
  ...
}

但是，我不确定这是否是一个好主意，因为我认为您不能假设“ember-view” div 将始终是脚本标记之后的第一个 div。

于 2015-08-10T16:23:54.747 回答