CSS & HTML5：在页面底部放置一个 <footer>？没有包装？答案

【问题标题】：CSS & HTML5: Position a <footer> at the bottom of the page? no wrapper?CSS & HTML5：在页面底部放置一个 <footer>？没有包装？
【发布时间】：2011-10-23 13:38:27
【问题描述】：

古老的问题。我需要在页面底部放置一个<footer> 元素。但是我没有包装器 div。

我确实有以下结构……

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

如果内容不够高，有没有一种简单的方法可以将页脚推到底部？

【问题讨论】：

标签： css html footer

【解决方案1】：

来自这个问题，并认为我会发布我遇到的内容。对我来说似乎是理想的方式。

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/

【讨论】：

我喜欢这个选项。太赞了。此外，如果您使用引导程序，请注意不要将 .footer 类与 footer 元素混淆。

【解决方案2】：

设为position: fixed; bottom: 0, height: xxx?当然，如果页面实际超过窗口底部，它会与任何内容重叠。也许一些 JS 来检测“短”内容并根据需要设置 css。

【讨论】：

只需在内容处设置与页脚高度相等的下边距

【解决方案3】：

根据您的代码，这可能不起作用，但我建议您将body 设置为position:relative;，然后将footer 设置为position:absolute; 和bottom:0。理论上它不会重叠。

【讨论】：

【解决方案4】：

AFAIK 这仍然是让页脚粘在页面底部的最佳方式：

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

【讨论】：

【解决方案5】：

我之前做过一个jsfiddle，看看这个http://jsfiddle.net/kuyabiye/K5pYe/尝试调整结果窗口，如果内容溢出，就会看到滚动。

【讨论】：

【解决方案6】：

这是一个非常适合我的解决方案。粘到底部，不与内容重叠，不需要包装器。

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 */
}

【讨论】：

对我来说效果很好。谢谢:)

【解决方案7】：

查看Fiddle

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'
     }); 

  });

});

【讨论】：

【解决方案8】：

我知道这是一篇旧帖子，但我想提供自己的解决方案（使用 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";
}

【讨论】：