0

序章

常にページの一番下に表示されるが、固定されていない (またはコンテンツと重なっている) フッターについては、十分にテストされた優れたレシピが数多くあります。ここに私のために働くものがあります：http://ryanfait.com/sticky-footer/

要するに、次のように機能します。

HTML:

<html><body>
  <div id="wrapper>SOME CONTENT</div><footer></footer>
</body></html>

CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#wrapper {
  min-height: 100%;
  height: 100%;
  margin: 0 auto -4em;
}
footer {
  height: 4em;
}

秘訣は、#wrapper使用可能な高さの 100% を使用することを強制することですが、余白の下にはフッター用のスペースが残されています (負の余白は正確にフッターのサイズです)。

問題の説明

シングル ページ アプリケーションの構築中に、Ember.jsなどの一部の JavaScript フレームワークは、ドキュメント構造に追加の div を追加します (たとえば、イベントを処理するため)。これにより、元のドキュメントの周りに次のような追加のラッパーが作成されます。

<html><body>
  <div class="framework-container">
    <div id="wrapper>SOME CONTENT</div><footer></footer>
  </div>
</body></html>

この追加divにより、CSS セットアップが壊れます。状況を改善するために、 は とframework-containerまったく同じようbodyに動作する必要があると言いたいので、以下を追加してみてください:

.framework-container {
  position: relative;
  height: 100%;
  min-height: 100%;
}

コンテンツがページの高さよりも小さい場合は、ほとんど機能します。そうしないと、ページのフッターと下部の間に顕著な距離があり、これを受け入れることができません.

この問題に対する純粋な CSS ソリューションを知っている人はいますか?

4

1 に答える 1

1

ラッパーが機能したかどうかはわかりませんが、Ember にアプリケーションを特定の要素に挿入するように指示できます。その要素の外 (上) に要素は挿入されません。

ルート要素を設定する 

App = Em.Application.create({
  rootElement: '#body'
});

HTML

<div id="container">
  <div id="header">I'm a header</div>
  <div id="body"></div>
  <div id="footer">I'm a footer</div>
</div>

CSS 

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

http://emberjs.jsbin.com/OPaguRU/1/edit

私はこれのいくつかを完全にジャックしました: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

于 2013-11-10T18:25:10.020 に答える