web-dev-qa-db-ja.com

cssでフッターを下に貼り付ける方法は？

ブラウザの下部にフッターを配置するための古典的な問題があります。 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;

位置の設定：fixedはIEで何らかの理由で動作しませんでした（まだブラウザの中央にフッターが表示されていました）、FFでのみ動作しました。

csssticky-footer
39
Amc_rtty

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

42
Nick Larsen
#Footer {
  position:fixed;
  bottom:0;
}

これにより、フッターはどこにスクロールしてもブラウザウィンドウの下部にとどまります。

29
codedude
#Footer {
position:fixed;
bottom:0;
width:100%;
}

私のために働いた

10
Sheikh Naveed

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

注付きの例： http://markbokil.com/code/bottomfooter/

4
mbokil
#footer{
position: fixed; 
bottom: 0;
}

http://codepen.io/smarty_tech/pen/grzMZr

4
Bhawna Malhotra

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

.footer
{
  width: 100%;
  bottom: 0;
  clear: both;
}
1
rzskhr

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

0
Chtiwi Malek

次のcssプロパティがそれを行います

position: fixed;

これが役立つことを願っています。

0
Abdelhameed Mahmoud

最新のブラウザでは、flexレイアウトを使用して、コンテンツの長さに関係なくフッターが下部にとどまるようにすることができます（長すぎる場合、下部はコンテンツを隠しません）

HTMLレイアウト：

<div class="layout-wrapper">
  <header>My header</header>
  <section class="page-content">My Main page content</section>
  <footer>My footer</footer>
</div>

CSS：

html, body {
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
}

.layout-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.layout-wrapper > .page-content {
  background: cornflowerblue;
  color: white;
  padding: 20px;
}

.layout-wrapper > header, .layout-wrapper > footer {
  background: #C0C0C0;
  padding: 20px 0;
}

デモ： https://codepen.io/datvm/pen/vPWXOQ

0
Luke Vo