2012-03-21 14 views
4

私は奇妙なフッターの問題を抱えています。スクロールするときを除いて、ブラウザの下部にフッター

http://jsfiddle.net/YGAvd/

私は、ウィンドウを展開または縮小する場合は、ページの下部にある雲は、ブラウザウィンドウの下部に固執します。しかし、私が下にスクロールすると、フッタはページの真ん中に巻き上げられます。これは、スクロールバーが表示される前に、すべてが900x600のウィンドウに収まるため、他のどのページでも問題ありません。

CSSドキュメントを共有する他のすべてのページのコードを邪魔することなく、スクロールしても(コンテンツ内に常に存在するので)ウィンドウの下部にフッタを保持する方法はありますか?

答えて

5

フッタCSSルールの変更 'position:absolute;' 〜 '位置:固定;'

また、他のいくつかのdefで再生する必要がありますが、これは動作します。

check it out

はここ....フッタの背景画像を入れて体の背景画像にしないでください、私の最後のフッタールール

footer { 
    position: fixed; 
    color: black; 
    width: 100%; 
    height: 4.6em; 
    background-image: url(http://img.photobucket.com/albums/v410/justice4all_quiet/bottom_clouds.jpg); 
    background-repeat: repeat-x; 
    background-color: e0e0e0; 
    z-index: -999; 
    overflow: hidden; 
    bottom: 0px; 
} 
+0

ありがとうございました! – amandathewebdev

1

です!

body { 
    line-height: 1; 
    overflow: auto; 
    background-image: url(http://img.photobucket.com/albums/v410/justice4all_quiet/bottom_clouds.jpg); 
    background-repeat: repeat-x; 
    background-position:bottom center; 
    background-attachment:fixed; 
    background-color: #b1ceff; 
    font: normal 95% Sathu, Verdana, Arial, Tahoma; 
    text-align: center; 
    height: 100%; 
} 

はイメージのため、あなたのフッターからコードを削除することを忘れないでください:

は、その後、あなたの体のタグは次のようになります。また、問題を回避するためにフッターの背景色を削除してください。

+0

私はこれを試して、それは不思議に動作します! – NotJay

関連する問題