5

CSSスティッキーフッターの2つの異なる実装を見つけました。

  1. RyanFaitスティッキーフッター-http ://ryanfait.com/sticky-footer/

  2. スティーブハッチャースティッキーフッター-http ://www.cssstickyfooter.com/

誰かがそれらのそれぞれがどのように機能するかの違いを説明できますか？

また、他に既知の実装がある場合は、コメントを投稿するか、この質問を編集してください。

4

2 に答える 2

15

それらは機能の点でかなり似ています。最初にdivをページの高さ全体に強制し、次にフッターのサイズの負のマージンを与えます。

    html, body {
    height: 100%; /*set 100% height*/
}
.wrapper {
    min-height: 100%;  /*content 100% height of page */
    height: auto !important;
    height: 100%; 
    margin: 0 auto -142px; /* negative value causes wrappers height to become (height of page) minus 142px, just enough room for our footer */ 
}
.footer, .push {
    height: 142px; /*Footer is the footer, push pushes the page content out of the footers way*/
}

これにより、ラッピングdiv内のすべてのコンテンツがページの高さからフッターの高さを引いた100％になるようになります。フッターが負のマージンと同じサイズである限り、フッターは左側のギャップに貼り付けられ、要素の下部に表示されます。

2つ目は、コンテンツをページの高さの100％にすることも強制します。

html, body {height: 100%;}  /*set 100% height*/

#wrap {min-height: 100%;} /* make content 100% height of screen */

次に、メインコンテンツの下部にフッターと同じサイズのスペースを作成します。

#main {overflow:auto; 
padding-bottom: 150px;} /* wrapper still 100% height of screen but its content is forced to end 150px before it finishes (150px above bottom of screen) */

次に、相対位置と負の上部マージンを使用すると、フッターが通常の位置（作成したばかりのスペース）の150px上に表示されます。

#footer {position: relative;
margin-top: -150px; /* Make footer appear 150px above its normal position (in the space made by the padding in #main */
height: 150px;
clear:both;}

注：これは、ページのコンテンツが.wrapper内に保持され、＃mainが#wrap内に保持され、フッターがこれらのコンテナーの外にある場合にのみ機能します。

あなたがその一部を理解していなかったならば、私にコメントを残してください、そして、私はそれに答えようとします。

編集：user360122への応答

最初のHTMLマークアップ：

<html>
<body>
<div class="wrapper">
<!--Page content goes here-->
<div class="push">
<!--Leave this empty, it ensures no overflow from your content into your footer-->
</div>
</div>
<div class="footer">
<!--Footer content goes here-->
</div>
<body>
</html>

2番目のHTMLマークアップ：

<html>
<body>
<div id="wrap">
<div id="main">
<!--Page content goes here-->
</div>
</div>   
<div id="footer">
<!--Footer content goes here-->
</div>
</body>
</html>

スタイルシートを含め、doctype .etcを宣言することを忘れないでください（これらは完全なhtmlページではありません）。

于 2011-04-21T15:35:08.513 に答える
1

ブートストラップのドキュメントには、非常に単純な例があります：http: //getbootstrap.com/examples/sticky-footer/

ラッパーやプッシュは必要ありません。

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
于 2014-06-24T15:56:53.513 に答える