0

stackoverflow や他のサイトでいくつかのトピックを見てきましたが、提案された解決策はどれもうまくいかないようです。

問題は、何を試しても、コンテナー (ラッパー) div の上部のパディングと同じ高さのスクロールバーがページに追加されていることです。コンテナー div の min-height をいじることによってのみ機能させることができますが、これは明らかに常に機能するとは限りません。これがコードです。

HTML:

<body>
<div id="container">
    <div id="header"></div>
    <div id="content"></div>
</div>
<div id="footer"></div>
</body>

（フッターの内側と外側を試しましたが、結果は同じです。）

関連する CSS は次のとおりです。

html, body {
    height: 100%;
}

body > #container {
    height: auto;
    min-height: 100%;
}


#content {
    height: 100%;
    position: relative;
}

body {
    margin: 0;
    padding: 0;
    color: #FFF;
    background: /*image here*/;
    background-size: cover;
    overflow: auto;
}

#container {
    width: 100%;
    padding-top: 50px;
    position: relative;
}

#header {
    background: /*image here*/;
    height: 130px;
    box-shadow: 4px 2px 5px #000;

    border-top: 2px solid #F8F8F8;
    border-bottom: 2px solid #F8F8F8;

    overflow: hidden;
}

#footer {
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
    background-color: #FFF;
    clear: both;
}

そこにはいくつかの奇妙なオーバーフローがあるかもしれませんが、問題を解決しようとしてさまざまな時点でスローされています。サイトの背景全体を覆う背景画像と、ヘッダー用の背景画像を使用しています。

オーバーフロー、高さ、マージン/パディング、または相対/絶対/固定位置をいじると、結果が悪化するか、同じ結果になります。

私はJSなしでこれをやろうとしていますが、他のすべてが失敗した場合は、それに頼るつもりです. その場合は、関連する JS スタックオーバーフローの質問やチュートリアルを教えていただけませんか?

アドバイスをよろしくお願いします。

4

1 に答える 1

2

これを実行しようとしているブラウザを提供していませんが、それが最新のブラウザであると仮定すると、cleanstickyfooter手法が最適に機能することがわかりました。(このテクニックは Trevor Sheridan の功績によるものです。)実装を確認できるように、JSFiddleで例を作成しました。必要に応じて、幅などを調整できます。最初のリンクは、多くの優れた詳細を提供します。

SO 要件ごとに、HTML は次のとおりです。

<body>
    <div id="wrapper">
        <div id="content_wrapper">
            <div id="content_inner_wrapper">
                <div>Site content will be contained here.</div>
            </div>
        </div>
    </div>
    <div id="footer_wrapper">
        <div id="footer_inner_wrapper">
            <div>The footer's content</div>
        </div>
    </div>
</body>

およびCSS:

html, body {
    height: 100%;
}
body {
    margin: 0px;
    padding: 0px;
}
div#wrapper {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0px 0px -41px 0px;
}
div#footer_wrapper {
    width: 100%;
    height: 41px;
    background-color: red;
}
div#content_wrapper {
    width: 100%;
    padding: 0px 0px 41px 0px;
}
div#footer_wrapper, div#content_wrapper {
    min-width: 500px;
}
div#footer_inner_wrapper, div#content_inner_wrapper {
    width: 500px;
}
于 2013-07-09T20:46:48.323 に答える