1

静的ヘッダー、2つのコンテンツ列、およびスティッキーフッターを含む新しいページで作業しています。私のフッターが私のコンテンツの下で転がり続けることを除いて、すべてが機能しています。私のコンテンツの下でそれをやめさせるために与えられることができるどんな助けにも感謝します。

私は無駄に見つかった提案を試しました：

FFではなくGoogleChromeでフッターの下にあるコンテンツ

ヘッダー/フッターが固定されたモバイルページでのコンテンツのスクロール

コンテンツの下にフッターを配置しても機能しないようです

フッターがページの下部に表示されないのはなぜですか？

CSS：

body, html {
    height: 99%;
}

#page {
    position: relative;
    margin-bottom: -100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    height: 100%;
    min-height: 100%;
}

#header {
    clear: both;
    float: none;
    min-width: 0px;
    margin-right: 0px;
    margin-left: -9px;
    margin-bottom: 0px;
    margin-top: -9px;
    z-index: 1;
    position: fixed;
    height: 150px;
    width: 100%;
    background-color: #fff517;
}

#wrapper {
    margin-bottom: 100px;
    float: none;
    clear: both;
    position: absolute;
    margin-top: 170px;
    left: 50%;
    width: 854px;
    margin-left: -422px;
}

#left-sidebar {
    clear: none;
    margin-left: auto;
    margin-bottom: auto;
    margin-right: 50px;
    margin-top: auto;
    min-height: 300px;
    width: 200px;
    float: left;
    background-color: #39ff32;
    position: relative;
}

#content {
    clear: none;
    float: left;
    min-height: 300px;                
width: 600px;
    background-color: #ff1c23;
    position: relative;
}

.push {
    clear: both;
    height: 200px;
}

#footer {
    clear: both;
    padding-top: 50px;
    background-color: #9f49ff;
    text-align: center;
    width: 100%;
    height: 50px;
    z-index: 0;
}

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<html>
<head>
<base href="http://www.footballpickpool.com/new_fpp/"/>
<link type="text/css" href="./resources/css/style.css"  rel="stylesheet"/>
</head>

<body>

<div id="page">
    <div id="header">
    </div>

    <div id="wrapper">
        <div id="left-sidebar">
        </div>

        <div id="content">
        </div>
    </div>
    <div class="push"></div>
</div>
<div id="footer">

</div>

</body>
</html>

フィドル： http： //jsfiddle.net/aUTqf/

洞察を提供してくれる人に事前に感謝します。

編集：IE以外のすべてのブラウザで期待どおりに機能するようになりました。問題は、いくつかの要素の固定された配置が原因でした。IEを理解するために、以下に含まれるコード：

body, html {
    background-position: 50% 80%;
    background-repeat: no-repeat;
    background-image: url(../images/background.jpg);
    background-color: #d9d9d9;
    height: 99%;
    margin: 0px;
    padding: 0px;
}

#header {
    padding-top: 15px;
    margin-left: auto;
    margin-bottom: 45px;
    margin-right: auto;
    margin-top: 0px;
    color: white;
    position: fixed;
    z-index: 99998;
    left: 0;
    top: 0;
    height: 150px;
    width: 100%;
    background-color: #fff517;
    }

#wrapper {
    float: left;
    clear: both;
    position: relative;
    left: 50%;
    width: 854px;
    margin-left: -422px;
    padding-top: 200px;
    padding-bottom: 150px;
}

#left-sidebar {
    clear: none;
    margin-left: auto;
    margin-bottom: auto;
    margin-right: 50px;
    margin-top: auto;
    min-height: 300px;
    width: 200px;
    float: left;
    background-color: #39ff32;
    position: relative;
}

#content {
    min-height: 300px;
    clear: none;
    float: left;
    width: 600px;
    background-color: #ff1c23;
}

.push {
    clear: both;
    height: 100px;
    background-color: #9f49ff;
}

#page {
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    height: 100%;
    min-height: 100%;
    width: 100%;
    z-index: 1; 
}


#footer {
    clear: both;
    margin-top: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-right: auto;
    background-color: #9f49ff;
    text-align: center;
    width: 100%;
    height: 50px;
    z-index: 0;
}
4

2 に答える 2

3

私はこれがあなたが望むように本当のスティッキーフッターだと信じています。

http://jsfiddle.net/PU8U3/

私はあなたのCSSからたくさんのものを削除しなければなりませんでした。私はそれを機能させるために必要なものだけを残そうとしました。これに必要なものを追加してみてください。

HTMLのスタイルシートリンクタグに注意してください。HTMLが別のHTMLをロードしているときに、JSFiddleを使用してCSSを編集するのは非常に困難です。

于 2012-08-04T05:33:38.607 に答える
1

フッターのサイズでコンテンツにパディングボトムを追加できます。これで準備完了です。

于 2012-08-04T03:57:04.080 に答える