如何将 <footer> 元素粘贴在页面底部（HTML5 和 CSS3）？答案

【问题标题】：How to stick <footer> element at the bottom of the page (HTML5 and CSS3)?如何将 <footer> 元素粘贴在页面底部（HTML5 和 CSS3）？
【发布时间】：2013-04-05 06:27:37
【问题描述】：

当我使用 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>

【问题讨论】：

在这里，我找到了一个很好的例子，但是添加了很多未使用的 css 代码。 twitter.github.io/bootstrap/examples/sticky-footer-navbar.html
将 display:inline-block 添加到它自己的页脚，我在常见情况下使用它。

标签： html css coding-style styles footer

【解决方案1】：

将页脚从 position: relative; 更改为 position:fixed;

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

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

【讨论】：

【解决方案2】：

这是一个使用 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 指出的那样，.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/

【讨论】：

您确定在页脚元素上需要position: relative 吗？由于指定的高度，您的解决方案效果很好。但我认为不需要页脚上的position: relative。仅当页脚元素下面有一些带有position: absolute 的子元素，并且您想将该子元素相对于页脚放置时，才需要它。
@Martin 'position: relative' 不是强制性的，clear: both 和#wrap 元素上的padding 相同。我将这些属性仅作为 HTML 页面的最小结构的示例。感谢您的注意，我会更新答案。

【解决方案3】：

我会在 HTML 5 中使用它...只是说

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

【讨论】：

绝对定位从文档流中取出一个元素（这里：页脚），所以如果你有很多垂直的内容，页脚将被放置在这个内容之上

【解决方案4】：

只需将position: fixed 设置为页脚元素（而不是相对元素）

Jsbin example

请注意，您可能还需要将margin-bottom 设置为main 元素至少等于页脚元素的高度（例如margin-bottom: 1.5em;），否则在某些情况下，主要内容的底部区域可能会被您的页脚部分重叠

【讨论】：

但是内容很多，还是有jsfiddle.net/84LxZ