web-dev-qa-db-ja.com

CSS＆HTML5：<footer>をページの下部に配置しますか？ラッパーなし？

古くからの問題。ページの下に<footer>要素を配置する必要があります。ただし、ラッパーdivはありません。

次のような構造になっています…

<body>
<header>
<section id="content">
<footer>
</body>

コンテンツが十分に高くない場合、フッターを一番下にプッシュする簡単な方法はありますか？

csshtmlfooter
14
matt

私の知る限り、これはフッターをページの下部に貼り付けるための最良の方法です：

http://www.themaninblue.com/experiment/footerStickAlt/

1
Karl

この質問に来て、私が遭遇したものを投稿したいと思いました。私にとって理想的な方法のようです。

CSS：

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

HTML5：

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

すべてのクレジットは http://mystrd.at/modern-clean-css-sticky-footer/ に送られます

16
Trace DeCoy

成功する position: fixed; bottom: 0, height: xxx？もちろん、ページが実際にウィンドウの下部を通過すると、コンテンツがオーバーラップします。おそらく一部のJSが「短い」コンテンツを検出し、必要に応じてCSSを設定します。

10
Marc B

コードによっては機能しない場合がありますが、bodyをposition:relative;に設定してから、footerをposition:absolute;およびbottom:0に設定することをお勧めします。理論的には、それは物事を重ねません。

2
jezza-tan

ここに私のためにうまく働く解決策があります。下部に固定され、コンテンツと重複せず、ラッパーも必要ありません。

https://jsfiddle.net/vq1kcedv/

html：

<!DOCTYPE html>
<head>
<title>Footer</title>
</head>
<body>
    <nav>Link1 Link2</nav>
    <article>content</article>
    <footer>Copyright</footer>
</body>
</html>

css：

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

body:after {
    line-height: 100px; /* height of footer */
    white-space: pre;
    content: "\A";
}

footer {  
    position: absolute;
    width: 100%;
    height: 100px; /* height of footer */
    bottom: 0px;
    margin-top: -100px; /* height of footer */
}
1
Frank Zalkow

以前にjsfiddleを作成したことがあるので、これをチェックしてください http://jsfiddle.net/kuyabiye/K5pYe/ 結果ウィンドウを再試行してください。コンテンツがオーバーフローする場合は、スクロールが表示されます。

1
Berkin Berkcan Çırak

私はそれが古い投稿であることを知っていますが、私は自分の解決策を提供したいと思いました（javascriptを使って）：

/* css */
footer { width:100%; bottom:0; }

/* javascript */
if ($("body").height() < $(window).height()) {
    document.querySelector('footer').style = 'position:absolute;'
}

これは、あらゆるサイズのあらゆる種類のフッターで機能するはずです。

編集：代替ソリューション（CSSの必要はありません）：

/* footer */
if ($("body").height() < $(window).height()) { /* if the page is not long enouth, let's put some more margin to the footer */
    var height = $(document).height() - $("body").height();
    document.querySelector("footer").style.marginTop = height + "px";
}
0
Paul Lemarchand

フィドル をチェックしてください

[〜＃〜] html [〜＃〜]

<header>

</header>

<section id="content">

</section>

<footer>

</footer>

[〜＃〜] css [〜＃〜]

body {
  height: 100%;
}
footer {
  width: 100%;
  height: 200px;
}

jQuery

$(function() {

  var footer  = $('footer'),
      footHgt = $('footer').outerHeight(),
      bodyHgt = $('body').height();

  footer
    .css({
      position: 'absolute',
      left: '0',
      top: bodyHgt - footHgt + 'px'
     });

  $(window).resize(function() {

    var footer  = $('footer'),
        footHgt = $('footer').outerHeight(),
        bodyHgt = $('body').height();   

    footer
     .css({
       position: 'absolute',
       left: '0',
       top: bodyHgt - footHgt + 'px'
     }); 

  });

});
0
mdesdev