div.fixed { 位置:固定; 底部:0; 右:0; 宽度:100%; 边框:3px实体#73AD21; ｝ <身体风格= "高度:1500 px”> < h2 >:固定;< / h2 > <p>一个位置为固定的元素;相对于视口的位置，这意味着即使页面被滚动，它也始终保持在相同的位置:</p> < div class = "固定" > 这个div元素的位置为:fixed; < / div > 身体< / >

大多数答案使用固定值的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";
    }

对于这个问题，我看到的许多答案都是笨拙的，难以实现和低效的，所以我想我应该尝试一下，并提出我自己的解决方案，只是一点点css和html

超文本标记语言 身体{ 高度:100%; 保证金:0; ｝ .body { Min-height: calc(100% - 2rem); 宽度:100%; 背景颜色:灰色; ｝ .footer { 高度:2快速眼动; 宽度:100%; 背景颜色:黄色; ｝ 身体< > <div class="body">test as body</div> <div class="footer">test as footer</div> 身体< / >

这是通过设置页脚的高度，然后使用CSS计算出页面的最小高度，页脚仍然在底部，希望这有助于一些人:)

一个解决方案是为盒子设置最小高度。不幸的是，IE似乎并没有很好地支持它(意外)。

如果你不希望它使用位置固定，并在移动设备上烦人地跟随你，这似乎对我来说是有效的。

html {
    min-height: 100%;
    position: relative;
}

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

只需要将html设置为min-height: 100%;位置是相对的，位置是绝对的;底部:0;左:0;在页脚。然后确保页脚是主体中的最后一个元素。

如果这对其他人不起作用，请告诉我，以及为什么。我知道这些乏味的风格技巧在我没有想到的各种情况下会表现得很奇怪。

一个类似于@gcedo的解决方案，但不需要添加中间内容来向下推页脚。我们可以简单地添加margin-top:auto到页脚，不管它的高度或上面内容的高度，它都会被推到页面的底部。

身体{ 显示:flex; flex-direction:列; 最小高度:100 vh; 保证金:0; ｝ .content { 填充:50 px; 背景:红色; ｝ .footer { margin-top:汽车; 填充:10 px; 背景:绿色; ｝ < div class = "内容" > 这里有些内容 < / div > <页脚类= >“页脚” 一些内容 < /页脚>