こんにちはEmberアプリケーションを作成して、私はSticky Footerを設定しようとしています。
私はこのチュートリアルでこれをやろうとしていますSticky Footer On CSS-Tricks、それは一度私の仕事です。
しかし、エンバーそのdosen't作業黙ったままのフッター

私のCSSを使用した：

.mainFooter { 
    height:100px; 
    color:white; 
    background-color: #0c2635; 
    text-align:center; 
} 
.wrapper { 
    min-height: 100%; 
    margin-bottom: -100px; 
} 
.wrapper:after { 
    content: ""; 
    display: block; 
} 
.mainFooter, .wrapper:after { 
    height: 100px; 
}

私のHTML：私が言ったように

<footer class="mainFooter"> 
    SOME TEXT 
</footer>

、それはdosent作品です。
私はインスペクタを介してソースコードを見て、私はエンバーはapplication.hbsファイルに入れIコンテンツへ独自のラッパーを追加したことを見て、このラッパーは私がやろうそうember-viewという名前のクラスがあります。

.ember-view { 
    min-height: 100%; 
}

をしかし、それはdosentの仕事でも、ページの中央に表示されるフッターです。
誰かがこれとsuccessidを試してみませんか？
この問題の解決策について知りたいと思います。

私はjsfiddle/codeopenで偽のエンバーアプリをするので、私は、私のサーバーへのURLをアプリのアップロード方法がわからない：http://drawyourgif.pe.hu/dist/

EDIT
kumkanillamが、私はそうしましたsugest解決策によると、：

Application.hbs：

{{outlet "modal"}} 
{{partial "header"}} 
<div id="gif" class="wrapper"> 
    {{outlet}} 
</div> 
{{partial "footer"}}

app.js

App = Ember.Application.extend({ 
    modulePrefix: config.modulePrefix, 
    podModulePrefix: config.podModulePrefix, 
    rootElement: '#gif', 
    Resolver 
});

そして、私は、コンソールにこのエラーが表示されます。私は間違っていた何

ember.debug.js:43272Uncaught TypeError: Cannot read property 'tagName' of undefined

？

出典

2016-09-30 Harman met

はcodepen/jsbinを投稿してもらえますか？また、この問題はフレックスボックスできれいに/簡単に解決されます。あなたはフレックスボックスの使用に慣れていますか？ – sheepdog

@sheepdogねえ、私はあなたが問題を見ることができるサイトのURLを追加して、私の編集を見て、ちょうどその作品をフレキシボックスを使用して気にいけない –

私はCSSスタイル '位置を適用@Harmanmet：固定; 底部：-3px; 左：2ピクセル; 権利：2px; 'に' .wrapper：after'はあなたのサイトで働いていました。あなたは私はあなたが言ったように行なったし、そのindex.htmlを – kumkanillam

.ember-viewがデフォルトですべてのemberコンポーネントに含まれるため、このクラスにCSSプロパティを適用することは適切ではありません。

多くの方法がありますが、以下は役立ちます。

application.hbsをラップしてpage-wrap div内にレンダリングすることができます。

あなたが app.jsで
index.htmlを

<div id="app-name" class="wrapper"> 
    {{content-for "body"}} 
</div>

application.hbs

<h1> Content </h1> 
{{outlet}} 
<div id="footer"> 
    <p>I'm the Sticky Footer. inside application.hbs</p>  
</div>

設定rootElementに以下の行を含める必要があり、このため

。アプリ全体にapp-name divにそれを含めるよう強制します。

app.js

App = Ember.Application.extend({ 
    modulePrefix: config.modulePrefix, 
    podModulePrefix: config.podModulePrefix, 
    rootElement: '#app-name', 
    Resolver 
});

app.css

#wrapper { 
    min-height: 100%; 
    overflow: auto; 
} 

#footer { 
    position: absolute; 
    bottom: -3px; 
    left: 2px; 
    right: 2px; 
    height: 50px; 
    background-color: rgba(0, 0, 0, 0.8); 
    color: #fff; 
}

最終更新：あなたはapp.js.には何も変更する必要はありません

ちょうどサンプル回転を見てください。私はこれがあなたここ SAMPLE TWIDDLE

出典

2016-10-01 06:28:45 kumkanillam

を試すことができます私はそれらをルート要素の外に置くと、彼らはフッタで作業しますか？ –

@Harmanmetを喜ば代わりにapplication.hbs見るために私の編集を見て、私はエラーをスロー@kumkanillamねえ、この – kumkanillam

でそれを言及そして、何についての 'リンク - 詳細は –

はフレキシボックスを使用するソリューションで助けになると思います。フレックスボックスを使い慣れていないので、フレックスボックスを使いたくないかもしれませんが、私はこの答えを後のGoogle検索に提出します。ここで

は、本体内の非常に少ない量でcodepenです：http://codepen.io/anon/pen/KgXgjV

ここでメインエリアの多くのより多くのコンテンツと同じCSSです：ここではhttp://codepen.io/anon/pen/dpVpBK

はposition: absoluteが動作しない理由の例です。：https://ember-twiddle.com/f620502b8172f4181c9d58503e02e39c?openFiles=templates.application.hbs%2C

HTML

<html> 
<body> 
    <div id="root" class="ember-application"> 
    <div id="ember332" class="ember-view"> 
     <div class='main-content'> 
     <h1>Welcome to Ember Twiddle</h1> 
     <br /> 

     <p> 
      this page has very little content 
     </p> 
     </div> 
     <div id="footer"> 
     <p>I'm the Sticky Footer. inside application.hbs</p> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

CSS

/* this is just to reset codepen */ 
/* probably not necessary on ember */ 
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
/* end reset */ 


html, body, #root { 
    height: 100%; 
} 

.ember-view { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    background: lightblue; 
} 

.main-content { 
    flex: 1; 
} 

#footer { 
    width: 100%; 
    height: 50px; 
    background-color: grey; 
}

出典

2016-10-01 12:22:01 sheepdog

黙ったままのフッター

答えて

最終更新：あなたはapp.js.には何も変更する必要はありません

HTML

CSS

関連する問題