0

私はこれを何日も見ていて、検索して検索しました。おそらく、木を見て森を見ることができないだけかもしれませんが、誰かが洞察を与えることができれば、本当に感謝しています.

わかりました、ページの一番上にあるようなフッターがあり、ページを下にスクロールすると、バーは常に画面の一番下にあります。

私の PC では問題なく動作しますが、テストした他の PC では表示されません。まったく同じ設定で、画像へのパスがあります。私はそれを理解することができないようです、私はバナナに行くように感じます!

htmlコードは次のとおりです。

<body id="home">
    <div class="wrap">
    <!-- Header -->
    <div id="header">
    </div>         
    <div id="slideshow-container"> 
        <div id="slideshow"></div>
        </div>
        <!-- // Header -->
        <div id="main" class="clearfix">      
    <!-- Content -->
    <div id="content">
  </div>
    <!-- // Content -->     
    <!-- Sidebar -->
    <div id="sidebar">                
    </div>            
    <!-- // sidebar -->         
    </div>
<!-- // Wrap end -->            
    <div id="footer" class="clearfix">
        <div class="wrap">
            <div class="clearfix">
                        </div>

        </div>
    </div>

わかりました、あなたはただ画像を見ることができません...何が起こっているのか-私はとても遅れています!!

CSS:

body{
    background: url(../images/bg_body.png) center 0 #ffffff repeat-x;
    font-size: 62.5%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #666666;
    padding: 0 0 50px 0;    
    height: 100%;

#footer{
    background: url(../images/bg_footer.gif) center 0 repeat-x;
    position: relative;
    bottom: 0;
    width: 100%;    
    left: 0;
    right: 0;
    z-index: 1000;
}

#footer .wrap{  
    background: url(../images/bg_footer_wrap.png) center 0 no-repeat;
    padding: 7px 0 0 0;
    height: 70px;

}
4

3 に答える 3

3

CssStickyFooter.comをよく見て、コードと比較してください。

すぐに明らかなことは、HTML が壊れている (ボディとラップが閉じられない) ことと、".clearfix" (投稿された CSS で定義されていない) がいたるところに適用されていることです。

于 2009-10-07T23:56:26.483 に答える
1

今日、素晴らしいスティッキーフッターソリューションを見つけました。それが役立つことを願って、私にとって最も簡単な解決策のようです：

<style type="text/css">
   html,body {
      height:100%
   }

   #wrapper {
      min-height:100%;
      margin-bottom:-150px; /* negative total computed height of footer */
   }

   #footer_padding {
      height:150px; /* total computed height of footer */
   }

   #footer {
      height:100px;
      margin-top:50px;
   }
</style>    


<div id="wrapper">

   <div>some content...</div>

   <div id="footer_padding"></div>

</div>

<div id="footer"></div>
于 2013-01-30T19:49:12.600 に答える
0

この github リポジトリ ( Bredele css sticky footer ) には、ヘッダー付きとヘッダーなしの 2 つのバージョンのスティッキー フッターがあります。

これらのバージョンは両方とも、余分なマークアップ、clearfix (代わりに CssStickyFooter) を使用せず、柔軟なコンテンツの高さで display:table (ポリフィルを使用して IE8 および IE6/7 で動作) を使用します。

それが役立つことを願っています！

オリヴィエ

于 2013-01-20T17:55:00.833 に答える