67

ブラウザの下部にフッターを配置する際に、古典的な問題が発生しています。http://ryanfait.com/resources/footer-stick-to-bottom-of-page/などの方法を試しましたが、良い結果は得られませんでした。FFと両方のブラウザウィンドウの中央にフッターが常に表示され続けます。 IE。

HTMLでは、この単純な構造を取得しました

<form>
 ...
 <div class=Main />
 <div id=Footer />
</form>

cssフッターの問題に関連するcssコードは次のとおりです。

    *
    {
        margin: 0;
    }


html, body
{
    height: 100%;
}


    #Footer
    {
        background-color: #004669;
        font-family: Tahoma, Arial;
        font-size: 0.7em;
        color: White;
        position: relative;
        height: 4em;
    }



    .Main
    {
        position:relative;
        min-height:100%;
        height:auto !important;
        height:100%;

        /*top: 50px;*/

        margin: 0 25% -4em 25%;

        font-family: Verdana, Arial, Tahoma, Times New Roman;
        font-size: 0.8em;
        word-spacing: 1px;
        line-height: 170%;
        /*padding-bottom: 40px;*/
    }

どこが間違っているのですか？私は本当にすべてを試しました。役立つ情報を見逃した場合はお知らせください。

よろしくお願いします。

よろしく、

回答ありがとうございます。それは一緒に働いた：

position:absolute;
    width:100%;
    bottom:0px;

設定位置：修正済みは、何らかの理由でIEでは機能しませんでした（ブラウザの中央にフッターが表示されました）。FFでのみ機能しました。

4

15 に答える 15

59

フッターのスタイルを と に設定してみてposition:absolute;くださいbottom:0;。

于 2009-09-28T18:28:41.033 に答える
46 
#Footer {
  position:fixed;
  bottom:0;
}

これにより、スクロールする場所に関係なく、フッターがブラウザウィンドウの下部に留まります。

于 2009-09-28T18:27:02.103 に答える
14 
#Footer {
position:fixed;
bottom:0;
width:100%;
}

私のために働いた

于 2011-11-11T23:58:41.547 に答える
5

スティッキー フッターと呼ばれる、固定ではなくスクロールする下部のフッターを多くの人が探していると思います。高さが短すぎると、固定フッターが本文コンテンツを覆います。html、本文、およびページ コンテナーを 100% の高さに設定し、フッターを絶対位置の下部に設定する必要があります。これを機能させるには、ページ コンテンツ コンテナーに相対的な位置が必要です。フッターには、フッターの高さからページ コンテンツの下マージンを引いた値に等しい負のマージンがあります。私が投稿したサンプルページを参照してください。

メモ付きの例: http://markbokil.com/code/bottomfooter/

于 2014-02-24T03:03:10.527 に答える
2

@nvdoと@Abdelhameed Mahmoudの混合ソリューションが私のために働いた

footer {
    position: sticky;
    height: 100px;
    top: calc( 100vh - 100px );
}
于 2020-12-15T22:34:08.877 に答える
1

「position：fixed; bottom：0;」を使用する場合 フッターは常に下部に表示され、ページがブラウザウィンドウより長い場合はコンテンツが非表示になります。

于 2012-04-04T15:50:05.557 に答える
1

これは私のために働いた：

.footer
{
  width: 100%;
  bottom: 0;
  clear: both;
}
于 2014-04-22T06:08:43.763 に答える
-1

このスティッキーフッターチュートリアルでも同様の問題が発生しました。div class=Main />メモリが機能する場合は、フォームタグ自体がラインナップに問題を引き起こすため、フォームタグを<セクション内に配置する必要があります。

于 2009-09-28T18:27:47.260 に答える