0

私はこの質問が古いものであることを知っていますが、調査して2日間試してみましたが、まだ運がありません。ここの誰かが私にアドバイスをくれることを願っています!

問題：

通常はシンプルなスティッキーフッターを適用する必要があるページがありますが、ここで問題が発生しています。

フッター div(#footer) を問題なく下部に固定できます (繰り返しの背景画像で幅 100% です)。次に、この DIV 内で、別の (#cut) を右に bg-image でフロートします(私の例でははさみ）。これもうまくいきます。

問題は、中央にいくつかのナビゲーション リンク (#links) を浮かせることができるように、プライマリの下に別の 100% 幅の div(#footer-link-wrap) が必要なことです。#footer-link-wrap 内で、別の画像を右端までフローティングする必要があります。配置された背景でこれを実行しようとしましたが、機能しません。

私は完全に壁にぶつかりました。フィードバックをいただければ幸いです。長い休憩の後、デザインに戻ったばかりで、おそらく私がばかげた間違いを犯したのでしょう。

css は次のとおりです。

* {
margin:0;padding:0;
} 


html, body {

 height: 100%;
 background-color:#000;
 }

#wrap {
 min-height: 100%;
 }

#main {
 overflow:auto;
 padding-bottom: 60px;
 }  

#footer {
 position: relative;
 margin-top:-20px; 
 height: 20px;
 clear:both;
 width:100%;
 background:url(foot-hair.png) repeat-x;
 background-position:0 8px;
}

#cut{
 float:right;
 width:40px;
 height:20px;
 background: url(haircut.png);
}

#footer-link-wrap{

 margin-top:-40px; 
 height:40px;
 width:100%;
 background:url(hair-fall.png) no-repeat;
 background-position:bottom right;

 }

#links{
 position:relative;
 margin-left:auto;
 margin-right:auto;
 width:800px;
 background-color:#fff;
 }

/*for opera
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}*/`

フロート ヘルプの例へのリンクは次のとおりです。

4

1 に答える 1

1

この実装を試してみてください: http://www.cssstickyfooter.com/

アップデート：

ここに私が見つけた問題があります：

  • スティッキー フッターの基本設定が仕様どおりに正しく設定されていません。#main の padding-bottom がフッターの高さと同じではありませんでした。
  • #links #footer-link-wrap div に text-align を使用できたときに float を使用しました。
  • 覚えていないその他の小さなことは、代わりにこの css シートを使用してみてください。
/*
固定フッター ソリューション
スティーブ・ハッチャー
http://stever.ca
http://www.cssstickyfooter.com
*/

* {マージン:0;パディング:0;}

/* すべてで 0 マージンを宣言する必要があります。また、メイン レイアウト コンポーネントでは、パディングではなくパディングを使用します。
間隔を追加するための垂直マージン (上下)。それ以外の場合、これらのマージンは合計の高さに追加されます。
フッターがもう少し押し下げられ、ブラウザーに垂直スクロール バーが作成されます */

html、本文 {高さ: 100%;}

#wrap {最小高さ: 100%;}

#main {overflow:auto;
    padding-bottom: 60px;} /* フッターと同じ高さでなければなりません */

#フッター {位置: 相対;
    マージントップ: -60px; /* フッターの高さの負の値 */
    高さ: 60px;
    クリア:両方;}

/*オペラ修正*/
body:before {/*おかげさまでマレイカ(コホーテック)*/
コンテンツ："";
高さ:100%;
フロート:左;
幅:0;
margin-top:-32767px;/* エリック J に感謝 - float の効果を無効にする*/
}




/************************************
*** 変更の開始 ***
************************************/
html、本文{
背景色:#000;
}

#フッター{
background:url(http://www.d-syne.com/float/foot-hair.png) repeat-x;
}

＃切る{
幅:100%;
高さ:20px;
background: url(http://www.d-syne.com/float/haircut.png) 右下のリピートなし。
}

#footer-link-wrap{
高さ:40px;
幅:100%;
テキスト整列: 中央;
background:url(http://www.d-syne.com/float/hair-fall.png) 右下のリピートなし。
 }

#リンク{
テキスト整列: 左;
マージン: 0 自動;
幅:800px;
背景色:#fff;
色: 黒;
}

幸運を。

于 2010-11-01T19:28:36.263 に答える