web-dev-qa-db-ja.com

ページの下部に<footer>要素を貼り付ける方法（HTML5およびCSS3）

位置relativeをコンテンツなしで使用すると、フッターが上がり、absoluteで多くのコンテンツがあり、フッターが下がり、fixedで常にそこにあります。

コンテンツに関係なくページの最後に到達し、コンテンツとともに縮小および拡大する簡単な方法はありますか？

コンテンツが多い場合、最初のページにフッターが表示され、コンテンツが少ない場合は下部に表示されます。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html,body {
            padding: 0;
            margin: 0;
        }

        header {
            position:fixed;
            top:0;
            width:100%;
            height:40px;
            background-color:#333;
            padding:20px;
        }

        footer {
            background-color: #333;
            width: 100%;
            bottom: 0;
            position: relative;
        }
        #main{
            padding-top:100px;
            text-align:center;
        }
  </style>
</head>
<body>
    <header>
    header
    </header>

    <div id="main">
    main
    </div>

    <footer>
    footer
    </footer>
</body>
</html>
html5css3coding-stylestylesfooter
19
Joe

フッターをposition: relative;からposition:fixed;に変更する場合

 footer {
            background-color: #333;
            width: 100%;
            bottom: 0;
            position: fixed;
        }

例： http://jsfiddle.net/a6RBm/

27
user1317647

次に、css3を使用した例を示します。

CSS：

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML：

<div id="wrap">
    body content....
</div>
<footer class="footer">
    footer content....
</footer>

jsfiddle

更新
@ Martinが指摘したように、「position：relative」は.footer要素では必須ではなく、clear:bothでも同じです。これらのプロパティは一例です。したがって、フッターを下部に貼り付けるために必要な最小のcssは次のとおりです。

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}

また、css-tricksにはこれを行うさまざまな方法を示す優れた記事があります。 https://css-tricks.com/couple-takes-sticky-footer/

8
Victor

HTML 5でこれを使用します...

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}
6
Omar

position: fixedを（相対ではなく）フッター要素に設定するだけです

Jsbinの例

margin-bottomをフッター要素の高さに少なくとも等しいmain要素にも設定する必要がある場合があることに注意してください（例：margin-bottom: 1.5em;）。メインコンテンツはフッターによって部分的にオーバーラップする可能性があります

0
fcalderan