0

問題

CSS スティッキー フッターのこの実装を使用しています。します：

html,body{
    height:100%;
}

繰り返しの背景を使用していますが、使用したいのですが、height:100%この問題 が発生します:(不十分な回答のある別のスティッキーフッターの質問ここに画像の説明を入力からの画像)

レンダリング時に画像のサイズがウィンドウのサイズに合わせられるため、それを超えるサイズになることはありません。

質問

長いページで完全にレンダリングされる繰り返し背景画像を使用して、既存の CSS スティッキー フッターを引き続き使用することは可能ですか?

また

背景の繰り返しをサポートする CSS スティッキー フッターの別のオプションはありますか?

参考のため

<div id="wrap">
    <div id="header">Header text</div>
    <div id="main">

    </div>
</div>
<div id="footer">Footer Text</div>

CSS

* {margin:0;padding:0;} 
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
    padding-bottom: 180px;}  /* must be same height as the footer */
#footer {position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;}
4

2 に答える 2

1

ラッパーを追加するだけです。少なくとも私はいつもまさにそうしています。そして、bg-image を div#no-footer にアタッチすると、下まで伸びます

html, body {
    height:100%;
}
#wrap {
    min-height:100%;
    background-image:url(...) top left repeat-x;
}
#no-footer-pad {
    padding-bottom:100px;
}
#footer {
    height:100px;
    margin-top:-100px;
}

html マークアップ:

<html>
<head></head>
<body>
    <div id="wrap">
         <div id="no-footer-pad"></div>
    </div>
    <div id="footer"></div>
</body>

#no-footer-padほぼこのマークアップがあるので、コンテンツがフッターに重ならないように、追加の div ( ) を追加するだけです。

于 2012-07-23T05:30:54.983 に答える
0

このスティッキーフッターの位置は、このように固定されていました

.footer{
position:fixed;
bottom:0;
left:0;
right:0;
height:xxxx;
}
于 2012-07-23T05:26:19.050 に答える