1

私は以前に私のために働いたこのソリューションを使用しています：

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

私は現在サイトで作業していますが、機能していません。ページの一部のdivで絶対位置を使用しているためだと思います。ページの下部に固執する代わりに、フッターはヘッダーの下、絶対に配置されたdivの上に表示されます。この状況でスティッキーフッターを機能させるにはどうすればよいですか？

<div id="wrap">
        <div id="container">

            <div id="myDiv">
               ...content...
               ... this div is absolutely positioned
            </div><!-- END aboutText -->

        </div><!-- END container -->
   <div class="push"></div>

</div><!-- END wrap -->
<div id="footer">
    ...footer content
</div>

実は今は動いています。理由はわかりません-それらのCSSの謎の1つ。ただし、関連する質問があります-ブラウザの最小の高さをどのように設定しますか？誰かがブラウザのサイズを変更する（小さくする）と、フッターが上に移動してコンテンツをカバーしなくなりますか？

編集-これがCSSです。フッターは下部にしっかりと固定されますが、ブラウザウィンドウが小さい場合は、ページのコンテンツdivをカバーします。

html, body {
    height: 100%;
}


#wrap{
    width:950px;
    margin: 0 auto -80px;
    min-height: 100%;
    height: auto !important;
    height: 100%;

}


.push {
     height: 80px;

 }

#footer{
     height: 80px;
     background-image:url(../images/img.jpg);

}

#container{
    position:relative;
}



#someDivWithinTheContainer{
    position:absolute;
    left:230px;
    top:300px;
}
4

3 に答える 3

0

IE6 がそのプロパティをサポートしていないことを除いて、正解は位置固定です。

于 2009-09-21T01:28:33.017 に答える
0

フッターを下部に貼り付けるために使用するものは次のとおりです。この方法では、ウィンドウがどれほど小さくなっても、フッターがコンテンツに重なることはありません。編集する場合は、#body div の padding-bottom が #footer div の高さよりも大きいことを確認してください。これにより、オーバーラップが防止されます。絶対位置のコンテンツを含むページがないため、それがどのように動作するかわかりません。フローティング コンテンツの場合、当然、その後にクリア ブロックが必要です。そうしないと、#body div が縮小されます。

CSS:

html, body {margin:0;padding:0;height:100%;}
#container {min-height:100%;position:relative;}
#body {padding:10px;padding-bottom:2em;zoom:1;}
#footer {position:absolute;bottom:0;width:100%;height:1em;}

html:

<body>
  <div id="container">
    <div id="body">
      (body contents)
    </div><!-- #body -->
    <div id="footer">
      <p>(footer text)</p>
    </div><!-- #footer -->
  </div><!-- #container -->
</body>

次に、IE6 を修正するために、条件付きコメントを追加します。

<!--[if lt IE 7]>
<style type="text/css">
#container {height:100%;}
</style>
<![endif]-->

また、IE が quirks モードではなく標準モードになるように、doctype を宣言することも重要です。

于 2009-09-30T22:06:49.157 に答える
0

ページの本文内で発生するスクロールを無視して、要素をウィンドウ フレームに対して固定配置します。

似ているが異なるため、absolute を使用することがあります。

「絶対」に関する最大の誤解の 1 つは、それがページ内に絶対的に配置されているということです (少なくとも、私が最近インタビューしたすべての人に基づくと)。そうではありません。Absolute は、要素が最も近い「位置付けられた」要素、つまり「」を持たない要素position: static(デフォルト) 内に絶対的に配置されることを意味します。他に何も配置しない場合は、ご想像のとおり、ボディです。位置の使用を開始すると、要素が何に対して相対的であるかを変更します。

これがあなたが遭遇したものだと思います。

于 2009-10-05T14:33:39.510 に答える