2

「ラッパー」divである親divから高さを継承するように設定された「メインセクション」divがあります。ラッパー div は、ドキュメントの本体である親 div から高さを継承するように設定されています。とタグは に設定されていhtmlます。 そのため、CSS の「スティッキー フッター」( http://www.cssstickyfooter.com/にあります)を使用するには、「フッター」の div の高さに等しい「メイン セクション」の div を設定する必要があります (これはラッパー div の外にある必要があります)。次に、フッターの divにもフッターの高さに等しい 負の値を指定する必要があります。 これらはすべて、ページの下部にフッターを維持するために機能しています。bodyheight: 100%

padding-bottom margin-top

100%background-colorメインセクションの がページ全体に表示される ように、フッターに追加します。

メインセクションがフッターを超えて拡張され、ウィンドウが 100% の高さを超えて拡大されている (ページの高さを超える十分なコンテンツがない場合) ことを除いて、私はこれを行うことに近づいています。ページの高さを超えるフッター (これは望ましくありません)。 フッターがandに設定されていても、メインセクション div

の必要なパラメーターがpadding-bottomこの問題を引き起こしているようです(これにより、ページの下部にフッターが保持されますが、メインセクション div は依然としてフッターはかなり）。それとも、ラッパーの属性が競合を引き起こしている可能性がありますか? clear: bothposition: relativemin-height: 100%

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

<div id="wrap">

    <div id="header">
        ...
    </div> <!-- end of header -->

    <div id="main-section">
        ...
    </div> <!-- end of main section -->

</div> <!-- end of wrapper -->

<div id="footer">
    ...
</div> <!-- end of footer -->


...そして、関連する CSS は次のとおりです。 

*
{
    margin: 0px;
    padding: 0px;
}

html, body
{
    height: 100%;
}

body
{
    background-color: #bbb;
}

#wrapper
{
    /* wrapper 100% of screen */
        min-height: 100%;

    height: inherit;

    width: 950px;
    margin-left: auto;
    margin-right: auto;
}

    #header
    {
        background-color: #C97;
        line-height: auto;
        text-align: center;

        font-family: "Lucida Console";
        font-weight: bold;
        font-size: 2.5em;
    }

    #main-section
    {
        background-color: #ddd;

        height: inherit;

        /* for a "sticky" footer */
        padding-bottom: 50px; /* equal to the height of the footer */
    }
    #footer
    {       
        clear: both;
        position: relative;

        height: 50px;
        line-height: 50px;
        margin-top: -50px; /* equal to the height of the footer, for a "sticky footer" */

        width: 950px; /* equal to width of wrapper */

        margin-left: auto;
        margin-right: auto;

        text-align: center;

        background-color: #C97;
    }

編集：Firefoxでこれをテストしていることに言及することが重要です。

4

3 に答える 3

1

ここにあなたのためのリファレンスがあります。

ライブデモ

于 2012-06-26T06:30:36.220 に答える
0
于 2012-06-26T05:51:08.157 に答える
0

したがって、同じ動作を示す回避策-

ネストされたメインセクションdivをいじる代わりにbackground-color、ラッパーdiv自体に適用しています（メインセクションdivには適用しませんが、フッターにpostion: absoluteも適用しますposition: fixeddiv)。

このように、メイン セクションには任意の量のコンテンツを含めることができ、高さ 100% の背景色で表示されます。

于 2012-07-06T04:22:19.880 に答える