3

私のサイトを参照してください[削除]

私のフッターは、意図したとおりにビューポートの最後に表示されます。

画面のサイズが垂直方向に変更されると、フッターはその上のすべてのものと重なります。

どうすればこれを回避できますか？

4

4 に答える 4

4

このスティッキー フッターのチュートリアルをご覧ください。次のコードだけで十分です。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

編集：

ラッパーの負の値がフッターの高さと一致しません。それはおそらくあなたの問題の一部です。

#wrapper {
    min-height: 100%;
    min-width: 450px;
    height: auto !important;
    height: 100%;
    /* your old code: margin: 0 auto -4em;*/
    margin: 0 auto -83px;
}

footer {    
    background: url('images/foot_bg.jpg') center no-repeat,
    url('images/foot_liq_bg.jpg') repeat;
    position:absolute;
    bottom:0;
    width:100%;
    height:83px;
    min-width: 450px;
}

編集：

html と body で高さが 100% に設定されていません。したがって、本文はブラウザの 100% ではなく、親 (html) の 100% にのみ設定されます。動作させるには、html の高さも 100% に設定する必要があります。

于 2012-04-25T16:07:22.240 に答える
1

絶対位置を指定しているため、重複しています。残りのコンテンツに対して相対的な位置を指定する必要があります。メイン コンテンツをページの 100% の高さにし、その下にフッターを配置します。次に、フッターに負のマージンを適用します。これは、高さと同じピクセル数です。

たとえば、フッターがheight:100px;使用されている場合margin-top:-100px;

ソース: CSS 固定フッター

于 2012-04-25T16:12:28.453 に答える
0

心配しないで、ショーン。あなたはそれを機能させるのにそれほど遠くありません。

要素上に変更padding-bottomしmargin-bottom、body要素から絶対位置を外す必要がありfooterます。また、この固定フッターの方法を機能させるには、「プッシュ」div を追加する必要があります。

このjsFiddleが役立つはずです。私にとってはうまくいきます：http://jsfiddle.net/4vunq/

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Vault-X</title>
<!--JS enabling IE <=8 to recognise HTML5 elements-->
    <script type="text/javascript">
    document.createElement ('header')
    document.createElement ('footer')
    </script>
    <script type="text/javascript" src="javascript.js"></script>
    <link href="style_01.css" title="one" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="switchoff">
        <div id="wrapper">
            <header></header>
            <div id="switch">
                <a href="#" onClick="lightSwitch();">
                    <img src="http://www.vault-x.com/images/switch.jpg">
                </a>
            </div>
            <div id="content"><p class="switch">Hello World</p></div>
            <div class='push'></div>
        </div>
        <footer></footer>
    </div>
</body>
</html>

関連する CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
footer, .push {
    height: 83px; /* .push must be the same height as "footer" */
}

ここではpadding-bottom、代わりに次のものがありましたmargin-bottom：

body {
    background:url('http://www.vault-x.com/images/body_bg.jpg') repeat-x;
    background-color: #000;
    margin-bottom:83px;
}

ここでも下マージンが重要です。

#wrapper {
    min-height: 100%;
    min-width: 450px;
    height: auto !important;
    height: 100%;
    margin: 0 auto -83px; /* bottom margin is negative value of footer's height */
}

そしてあなたのフッターコード:

footer {
background: url('http://www.vault-x.com/images/foot_bg.jpg') center no-repeat,
url('http://www.vault-x.com/images/foot_liq_bg.jpg') repeat;;
        width:100%;
        height:83px;
        min-width: 450px;
}

それはちょうどそれを行う必要があります。見栄えの良いサイト。そして成功を祈る！:)

于 2012-04-25T17:43:10.243 に答える