0

作業中のサイトにスティッキーフッターを実装しようとしています（ここを参照）。CSS Sticky Footerのガイド、具体的にはこの実装に従おうとしました。

これはFirefox（13）では完全に機能しますが、Chrome（21）およびIE（9）では、＃footerがページのさらに下にプッシュされ、垂直スクロールバーが追加されます。これは、＃wrapper内のパディングとマージンの使用に関係していると思いますが、この問題に特に指を置くことはできません。助けていただければ幸いです。

サイトの構造：

<html>
    <div id="wrapper">
        <div id="header"></div>
        <div id="menu"></div>
        <div id="page"></div>
    </div>
    <div id="footer"></div>
</html>

および関連するCSS：

#wrapper {
    min-height: 100%;
    width: 100%;
}
#header { 
background: url("/images/backgrounds/transparent.png") transparent;
    border-bottom: 2px solid #EF7C31;
    height: 44px;
    margin: 0 auto 20px;
    width: 960px;
}
#menu { 
background:#FFFFFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    height: 60px;
    margin: 0 auto 20px;
    padding: 10px 20px;
    width: 920px;
}
#page {
background: #FFFFFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin: 0 auto 30px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 20px 30px;
    width: 920px
}
#footer {
background: url("/images/backgrounds/transparent.png") transparent;
    border-top: 2px solid #EF7C31;
    clear: both;
    height: 116px;
    margin-top: -158px;
    overflow: auto;
    padding: 20px;
    position: relative;
}

ありがとうございました

4

2 に答える 2

2

この行をラッパーに追加します。

overflow: hidden;

だからあなたは持っているでしょう：

#wrapper {
    min-height: 100%;
    width: 100%;
    overflow: hidden;
}

または、フッターの直前にプッシュdivを追加します。これにより、フッターが押し下げられます。

于 2012-05-23T12:49:02.823 に答える
0

私はいくつかの問題を引き起こしているいくつかのことに気づきました。リンクしたチュートリアルは、ここでは悪意のあるものとしてマークされているため、私は常にRyanFaitのCSSStickyFooterTutorialを使用しています。

あなたが何を持っているかをチェックすると、いくつかの違いに気づきました。まず、すべてのブラウザでこれを機能させるには、HTMLの本文と高さを100％に設定する必要があります。次に、パディングと境界線が問題を引き起こしていたため、フッター内の特定のコンテンツを含み、パディングと境界線のcssが含まれる別のdivを作成しました。

HTML：

<html>
    <div id="wrapper">
        <div id="header"></div>
        <div id="menu"></div>
        <div id="page"></div>
        <div class="push"></div>
    </div>
    <div id="footer">
        <div class="footerContent"></div>
    </div>
</html>​

CSS：

    * {
    margin: 0;
}

html, body {
    height: 100%;
}

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

#footer, .push {
    height: 158px; /* .push must be the same height as .footer */
}

.footerContent {
    border-top: 2px solid #EF7C31;
    padding:20px;
}

ライブデモ

于 2012-05-23T12:50:22.457 に答える