2

ビューポートの高さいっぱいに自分の ember アプリが必要です。ember は、body タグと application.hbs の最初のタグの間で制御できない div を配置するため、期待どおりに動作しません。

私のapplication.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>

script 要素の後の最初の 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

script タグの後の最初の div のスタイルを設定するだけの場合は、CSS で Adjacent Sibling Selector を使用できるはずです。

script + div {
  ...
}

ただし、「ember-view」div が常に script タグの後の最初の div であると想定できるとは思えないため、これが良いアイデアであるかどうかはわかりません。

于 2015-08-10T16:23:54.747 に答える
0

最小限の JS の回答。ビュー テンプレートまたはアプリケーション js に、次の JavaScript を追加します。

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

次に、対象とする要素のそのクラスのフルハイト CSS を定義します(以下の例)。

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