0

使用しているテンプレートでフッターをブラウザーの下部に表示するのに問題がありました。フッターを「プッシュ」するコンテンツがたくさんある場合、Firefox では問題ないように見えますが、Chrome ではページの下部の「空中」にあり、見た目が非常に悪いことがわかります。

何か問題があるに違いありませんが、多くのスティッキー フッター チュートリアルを見た後でも、問題を解決しているようには見えません。私はまだhtml/phpの初心者なので、助けていただければ幸いです。問題を解決したいと思っています。

style.css と jsfiddle のサンプル ページを貼り付けました: http://jsfiddle.net/3KZh3/4/

4

6 に答える 6

1

フッターの上の分割の最小の高さを修正します。私はそれがうまくいくと思います。

それ以外の場合は、フッターのpositionプロパティをabsoluteに設定し、bottomを0に設定します。これが機能することを期待してみてください。

于 2012-08-21T11:45:41.933 に答える
1 
   Try this one dont forget to add  `position:relative` to it's parent div or element 
   #parent-div{
          position:relative;
    }

    #footer {
        position:absolute;
        bottom:0px;
    }
于 2012-08-16T11:05:45.570 に答える
0

http://jsfiddle.net/sheriffderek/varaH/1/

私もこれの底に到達しようとしています。これが私の基本的な例です。レスポンシブサイトではさらに複雑になります...しかし、それが可能であることを覚えておいてください...うまくいけば、これが役立つでしょうか？

于 2012-08-22T03:51:12.490 に答える
0 
position:absolute;
bottom:0;

フッターが一番下に留まるようにします。ただし、それに応じて残りのコンテンツにいくつかの変更を加える必要があります。

この例を見てください：ここ

于 2012-08-21T11:56:05.797 に答える
0

position:fixed ページをスクロールできるように、本文にダミーデータをたくさん追加して実験してみてください。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Some Page</title>
    <style type="text/css">
        #footer{
            position:fixed;
            bottom:0px;
            background-color: black;
            color:white;
        }
    </style>
</head>
<body>
    <h1>Some Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div id="footer">
        &copy; company name
    </div>
</body>
</html>

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

于 2012-08-28T12:37:17.003 に答える
0

これを試して：

#footer {
    position:absolute;
    bottom:0px;
}
于 2012-08-16T10:59:24.403 に答える