我发明了一个非常简单的解决方法，对我来说非常有用。您只需在div中包装除页脚之外的所有页面内容，然后将min-height设置为视点减去页脚高度的100%。不需要在页脚或多个包装器div上进行绝对定位。

.page-body {min-height: calc(100vh - 400px);} /*将400px替换为页脚高度*/

要获得一个粘性页脚:

为你的内容设置一个<div> with class="wrapper"。 在包装器的</div>结束之前放置 < div class = "推" > < / div >。 在包装器的</div>结束后放置 < div class = "脚注" > < / div >。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

带有显示的粘性页脚:flex

解决方案的灵感来自菲利普沃尔顿的粘性页脚。

解释

此解决方案仅在以下情况下有效:

Chrome≥21.0 Firefox浏览器≥20.0 Internet Explorer浏览器≥10 Safari≥6.1

它基于伸缩显示，利用了flex-grow属性，该属性允许元素在高度或宽度上增长(当流动方向分别设置为列或行时)，以占用容器中的额外空间。

我们还将利用vh单位，其中1vh被定义为:

视口高度的1/100

因此，100vh的高度是告诉一个元素跨越整个视口高度的简洁方法。

这是你如何组织你的网页:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

为了让页脚固定在页面底部，您希望正文和页脚之间的空间增加到将页脚推到页面底部所需的大小。

因此我们的布局变成:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

实现

身体{ 保证金:0; 显示:flex; flex-direction:列; 最小高度:100 vh; ｝ .spacer { flex: 1; ｝ /*为演示的目的使它可见*/ .footer { 高度:50 px; 背景颜色:红色; ｝ 身体< > <div class="content">Hello World!< / div > < div class = "隔离" > < / div > <页脚类=“页脚”> < /页脚> 身体< / >

你可以在JSFiddle玩。

Safari怪癖

请注意，Safari对flex-shrink属性的实现有缺陷，该属性允许项缩小到显示内容所需的最小高度以上。 要解决这个问题，你必须在上面的例子中显式地将.content和页脚的flex-shrink属性设置为0:

.content {
  flex-shrink: 0;
}

.footer {
  flex-shrink: 0;
}

或者，将spacer元素的flex样式更改为:

.spacer {
  flex: 1 0 auto;
}

这种3值简写样式相当于以下完整设置:

.spacer {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

优雅的工作无处不在。

我发明了一个非常简单的解决方法，对我来说非常有用。您只需在div中包装除页脚之外的所有页面内容，然后将min-height设置为视点减去页脚高度的100%。不需要在页脚或多个包装器div上进行绝对定位。

.page-body {min-height: calc(100vh - 400px);} /*将400px替换为页脚高度*/

这些纯css解决方案与动态调整的内容正常工作(至少在firefox和Safari)例如,如果你有一个背景设置在容器div,页面,然后调整(添加几行)表内的div,表可以伸出的风格的底部区域,也就是说,你可以有一半的表在白色黑色主题和一半的表完成白色因为字体颜色和背景颜色是白色的。这基本上是无法修复的与meroller页面。

嵌套的div多列布局是一个丑陋的hack和100%最小高度的主体/容器div粘贴页脚是一个丑陋的hack。

我尝试过的唯一一个在所有浏览器上都可以工作的无脚本解决方案:一个更简单/更短的表，包含thead(用于标题)/tfoot(用于页脚)/tbody (td’s用于任意数量的列)和100%的高度。但这有语义和SEO的缺点(tfoot必须出现在tbody之前。尽管ARIA角色可能会帮助一些像样的搜索引擎)。

大多数答案使用固定值的css。虽然它可能工作，但当页脚更改时，需要调整页脚大小的固定值。另外，我使用的是WordPress，不想打乱WordPress主题为你定义的页脚大小。

我用一点javascript解决了这个问题，只在需要时触发。

    var fixedFooter = false;
    document.addEventListener("DOMContentLoaded", function() {fixFooterToBottom();}, false);
    window.addEventListener("resize", function() {fixFooterToBottom();}, false);
    function fixFooterToBottom()
    {
        var docClientHeight = document.documentElement.clientHeight;
        var body = document.querySelector("body");
        var footer = document.querySelector("footer");

        fixedFooter = fixedFooter ? (body.clientHeight  + footer.clientHeight ) < docClientHeight :  body.clientHeight < docClientHeight;
        footer.style.position = fixedFooter ? "fixed" : "unset";
        footer.style.left = fixedFooter ? 0 : "unset";
        footer.style.right = fixedFooter ? 0 : "unset";
        footer.style.bottom = fixedFooter ? 0 : "unset";
    }