1

http://www.cssstickyfooter.com/から簡単なCSSを入手して、コンテンツの長さに関係なく常に固定されるフッターを取得しました。現在、これは実際には機能していません。このフッターには2つの異なる問題がありますが、関連していると思われるため、ここで両方に質問します。

まず、サイトのcssを次に示します。

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;}

そして、これが私がページ全体に使用しているHTMLです。

<html>
    <head>
        <title>{$title_text}</title>
        <link rel="stylesheet" type="text/css" href="/global/global.css" />
    </head>
    <body>
        <div id="wrap">
            {$navbar}<hr><div id="content">{$body}</div>
        </div>
        <div id="footer">
            {$footer}
        </div>
    </body>
</html>

ご覧のとおり、としてフォーマットされた変数がいくつかあります{$variable}。これらは別のファイル/文字列から取得されます。

問題1：

フッターが高すぎて、ページ上の他のコンテンツと重複しています。これは次のようになります。

このフッターは重なっています！

この問題を解決するためwrapに、フッターの直前にあるIDのdivに200pxのパディングを追加しました（上記のHTMLを参照）。これにより、そこの写真に見られる問題が修正されます。ただし、別の問題が発生します。コンテンツがほとんどないページでは、フッターが200ピクセル下に移動しているため、下にスクロールして表示する必要があります。私がこのCSSコードを入手したサイトは、これは起こらないはずだと言っていました。

問題2：

フッターがブラウザのウィンドウの端に届きません。これが私が話していることです：

ここに画像の説明を入力してください

フッターはウィンドウの右側と左側に「接触」している必要がありますが、ご覧のとおり、わずかなマージンがあるようです。正直なところ、これを修正する方法がわかりません。しかし、Chrome、Firefox、そしてInternet Explorerでも同じようにレンダリングされるので、バグではないと思います。

どんな入力でも大歓迎です。見てくれてありがとう！

4

2 に答える 2

1

1）変更してみてください

#footer { position: relative; }

に#footer {position: absolute; }

2）コードに追加する

html, body { padding: 0; margin: 0; }フッターの周りのスペースを防ぐため

于 2012-06-01T02:16:24.043 に答える
1

HTMLがCSSと一致していないようです。cssには「#main」が含まれていますが、メインコンテンツは

<div id="content">...</div>
于 2012-06-01T02:09:20.093 に答える