11

Ember アプリケーションのルート ビューをフル (100%) の高さにしようとしていますが、これまでのところ失敗しています。

なぜそれが必要なのですか？ページのコンテンツが高さ全体に収まらない場合でも、下に揃えたいフッターがあります。そのために、私は次のCSSを持っています：

.push {
  height: 60px;
}

.content {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;
}

HTML (Twitter Bootstrap を使用):

<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 がなくてもうまく機能します。ここで、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">は、すべてを含む a を挿入します。これは、div の高さが完全ではなく、フッターがコンテンツの直後のページの中央にぶら下がっていることを除いて、それ自体はかなり問題ありません。

解決策を探しましたが、この問題を回避できるものは見つかりませんでした。私の推測では、Ember でルート ビューを 100% の高さに設定するのが最も簡単な方法です (その方法が見つからないようです)。解決策が何であれ、少なくとも IE8 と互換性がある必要があります。

前もって感謝します！

4

4 に答える 4

16

スティッキー フッターを Ember JS と Bootstrap で動作させようとして同じ問題が発生しました。divご指摘のとおり、問題は100% の高さを取得しないコンテナー内にビューを作成する Ember JS にあります。

Ember は直接の子.ember-viewを1 つだけレンダリングするため<body>(つまり、アプリケーション ビュー)。IE8 を含むブラウザーで動作するこの CSS を使用できます。

/* Works in all browsers, does not effect other views within your application */
body > .ember-view {
    height: 100%;
}

.ember-viewサブビューはページの直接の子ではないため、アプリケーション内のサブビューには影響しません<body>。

于 2013-11-03T15:58:14.183 に答える
0

ここで、実際には Ember.JS とは関係のない 2 つの回答を与えることができ
ます。CSS で、ember-view クラスの高さを 100% に設定するだけです。

.ember-view {
 height: 100%;
}

このスタイリングを使用する他のビューを避けたい場合は、ビューの id をここで指定されたものとして使用できますemberXYZ。

しかし、実際の要件は
2) フッターにページの下部のみを表示させることです。実際にフッターを作成し、値を にabsolute設定できます。bottom0

footer {
position:absolute;
bottom: 0px;
}
于 2013-03-26T17:45:18.817 に答える