2

スティッキー フッターが機能しません。基本的に、このデモが行うこととまったく同じことをしたい

http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

これを機能させるために約12のチュートリアルを試しましたが、できません。誰かが私を助けることができますか？ここに私のサイトがあります (Wordpress 3.4.1 を実行しています)

http://hgsupport.x10.mx/support/

ありがとう

4

5 に答える 5

0

リンクした例でChromeインスペクターを使用すると（DOMツリー、要素に適用されるCSSルールが表示され、実際のJSコンソールとさらに多くのツールと情報が提供されます）、彼が次のCSSをフッターdivに適用したのを見ました:

#footer{
    position: absolute; /* Allows you to position the element anywhere
                           you want without affecting other elements */
    bottom: 0;  /* Distance from bottom of element to bottom of page set to 0 */
    height: 60px; /* Footer is 60 pixels high, not too important */
    width: 100%;  /* width of footer is all the width of the parent element, which
                    is all available space here. */
}

フッターをページではなく画面の下部に配置したい場合は、上記のコードposition: absoluteをに置き換える必要があります。position: fixed

ソース コードを表示し (ほとんどのブラウザーでは Ctrl-U)、CSS を確認することもできます。

于 2012-07-30T19:16:12.260 に答える
0

http://jsfiddle.net/yceaS/で、この設定がニーズに合っているかどうかを確認してください。

div重要な部分は、コンテンツとフッターを別々にラッパーを用意し、ルールをdiv使用して位置を修正することですCSS

于 2012-07-31T11:26:18.867 に答える
0 
position: fixed;
bottom: 0;

それが関連する CSS です。http://jsfiddle.net/ZZYPK/で例を見ることができます。

編集: ページの下部にあることを示すために、多くのサンプル テキストを含む例: http://jsfiddle.net/ZZYPK/1/

于 2012-07-30T20:23:01.877 に答える
0

おそらくあなたのCSSでこのようなものはありますか？

#footer
{position: fixed; bottom: 0;}
于 2012-07-30T19:13:19.190 に答える
0

私はあなたと同じ問題を抱えていましたが、これで解決しました！

CSSは次のとおりです。

html{
   height: 100%;
}
body{
   height: 100%;
}
.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px auto;
   /*The -100px mentioned above needs to be the exact height of the footer.*/
}
.footer{
   height: 100px;
   clear: both;
   position: relative;
}
.nudge{
   height: 100px;
   clear: both;
}

HTML は次のようにフォーマットされます。

<html>
  <body>
    <div class="wrapper">
      Your main content goes in here
      <div class="nudge"></div>
      <!--The nudge div should remain empty and makes space for the negative margin assigned above.-->
    </div><!--END class="wrapper" -->
    <footer>
      Your footer content goes in here
    </footer>
  </body>
</html>

ナッジは、ウェブ上の他のすべてのソリューションや他の回答に欠けていたものでした.

ソース: http://www.davidjrush.com/blog/2009/01/css-sticky-footer/

于 2012-11-03T04:30:18.893 に答える