如果您能够为页脚应用固定高度，则效果很好。
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 Pen Sticky Footer。
请注意，此 clearfix 是唯一一个使用点（content: “.”;）而不是像“强制元素自行清除其子元素”代码段中的空格的元素。
Helbrand
感谢您的解释！我真的很努力地理解细微差别（例如“点”和“空格”），以及如何不仅以反应式的方式应用它们，还可以以有利于设计的方式应用它们。
谢谢这个。我更喜欢通过反复试验而不是先阅读。我尝试这种页脚方法已经很长时间了，然后才知道修改页脚位置（在“添加内容”的情况下）的方法之一是将 body 标签设置为 100%，然后才能将高度设置为页脚其他兄弟元素的百分比。花了很长时间。如果我在你身边，我会给你一个拥抱。
非常简洁，我将在我的代码中测试一下。
请注意，设置 html {height:100%} 会导致一个错误，即底部对齐的 body 背景图像将无法附加到 body 的实际底部。
相反，它将附加到视口底部并向上滚动，并在下方显示难看的空白区域。
解决方案是将您的背景应用于内部元素，或者您的设计可能可以使用 background-attachment:fixed 代替。
Chris，您又提供了一段精彩的代码，谢谢。
请注意，粘性页脚在 Opera 和 IE8 中效果不佳。在每个浏览器中打开页面，使浏览器窗口半开，现在将窗口向下拖动，现在可以看到页脚没有跟随。这个在所有浏览器中都能工作……
Chad，此链接打开的是 GoDaddy 而不是粘性页脚……
实际上，此链接为我打开了一个低俗的聊天室。我很快就离开了那里。请删除或修复链接。
已删除链接，并隐藏线程。
您用于代码片段主菜单的代码是什么？
CSS
HTML
HTAccess
等等。
最好有一个演示。
现在有演示了。
@iTechRoom
我正在尝试删除我的 WordPress.com 博客的页脚，想知道是否可以在不购买 css 升级的情况下做到这一点，如果是，代码是什么。我对整个 wordpress 了解不多，对编码一无所知。请帮忙！
删除获取页脚的 php 调用？
删除 index.php 或 pages.php（等）底部的这一行。
PHP 未显示。
再次显示。已删除末尾的“”。
?php get_footer(); ?
这到底是什么？
body (&rt;'s) #wrap {height: auto; min-height: 100%;}
我在我的项目网站上使用了这个技巧，它对我很有用。
我是一名来自印度古吉拉特邦的 BCA 学生。
感谢 CSS-tricks
我也来自印度。每次有人用不好的语法评论时，我都会假设他是来自印度的。请尝试学习良好的英语。作为一名程序员，或者即使是使用电脑的人，这将来肯定会对你有所帮助。
我使用类似的方法很多年了。
现在有没有更好的方法用 css3 来实现？
这就是我一直在寻找的……谢谢。
嗨，
感谢您的代码，但我遇到了 Firefox（Mac-OSX）的问题。
还有其他人遇到同样的问题吗？
糟糕！我错了……html 代码中有一个注释在 Firefox 中造成了干扰，我已将其删除，现在没问题了。
非常感谢，精彩的文章！！
谢谢！在我的项目网站上效果很好。
很棒的代码片段。我将一直使用它。
但是我遇到了一个问题，即 body 上的大背景图像在向下滚动后会消失。
解决方案
在 CSS 中的第二行添加 overflow: auto。
html, body, #wrap {
height: 100%;
overflow: auto;
}
@Michael Ware：这太棒了！我有一个基本的粘性页脚设置，在 <HTML> 元素中使用重复的 bg-image，以及在 <BODY> 元素中使用固定的 bg-image。我遇到了同样的问题/错误，即 <BODY> bg-image 在浏览器视口底部被截断。在 <BODY> 元素中添加“overflow: auto”解决了此错误，但您是否知道它在其他浏览器中是否有效（并且不会导致其他问题）？
对我来说，使用 overflow 效果完美。谢谢。
很棒的文章！但是……
我尝试在我的网站上实现它，但似乎负边距值对我无效。虽然内容不是很高。
它将我的页脚定位在视口下方“页脚高度”处。
谁能帮我解决一下。非常感谢！
干杯，Sam
我所知道的、最简单且最兼容的粘性页脚是 Ryan Fait 的粘性页脚。我很久以前就遇到了它，有谁知道它是否有任何问题吗？我还没有遇到过任何问题。
这与这里的一样，只是这个使用伪元素而不是要求您向标记中添加 .push。
大多数网站根本不需要粘性页脚，因为所有页面都比一个屏幕高。总是。
不。
在这方面完全错误。
大家好，
我尝试将一个超级菜单粘贴到页眉中，但没有成功，它似乎破坏了页脚正确浮动功能……有什么建议吗？
嗨，各位，
如何在HTML5中实现这个功能？这不会与样板中的CSS冲突吗？或者我只需要将代码放在作者部分？
我找到了答案……真是天才，他们考虑到了所有情况，我向Paul Irish和团队的其他成员致敬。
真的很喜欢这个！
我不太确定，但我认为
#wrap应该设置一个margin-bottom，其值为#footer的高度：S
谢谢，但是我在Firefox中遇到了一些问题:/
可变高度粘性页脚：http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
看起来很有希望。有人测试过这个吗？
我正在测试它，布局大致如下
伪代码可能不是最好的布局，但希望足以让我开始。此外，还必须考虑如何至少使其在最新的IE10中看起来不错，例如，使用此CSS Flexbox支持图表： https://caniuse.cn/flexbox
这太棒了，绝对是Matthew James Taylor提出的解决方案的简化版本。感谢分享。
嗨，我在谷歌浏览器（Windows）中遇到了一个错误，尽管这可能只是我的电脑问题。当我调整窗口大小直到出现滚动条，刷新页面，然后最大化时，页脚会跳到内容的底部。此错误出现在cssstickyfooter.com以及其他使用此方法的网站上。关于修复方法有什么想法吗？
对不起，但这对我来说不起作用……我必须将position:fixed和bottom:0应用于我的页脚才能使其工作，而无需此处提供的任何代码。但是，也许是因为我试图在DotNetNuke中使用它。它在预设样式等方面的工作方式略有不同，可能。但无论如何，这让我开始了，所以还是要感谢；D
耶！！！Taarique Debidin 你是我的男人！
我正在一个相当复杂的系统中使用它，并且遇到了同样的问题。
最终，我只需要将position:fixed和bottom:0应用于页脚即可。
感谢这个解决方案！我的页脚非常顽固。
我在我的网站上应用了粘性页脚的技术，但我的内容需要在#main中水平和垂直对齐。但是由于“botom padding-bottom: 180px”（当它必须与页脚大小相同），我的#main没有垂直对齐。如果我取消此填充，并在#main高度中设置一些值，这可以工作！，但我的页脚并不总是位于底部。在这种情况下我该怎么办？我需要一些帮助！！
它起作用了！谢谢你的技巧 :)
你应该在这个教程中上传演示，这将非常有帮助。
有一个演示会很棒，谢谢！
如果将box-sizing: border-box;添加到#main，它会将padding-bottom绘制到#main的高度中。这解决了我在将#main的高度设置为100%时遇到的问题。
谢谢，这帮了大忙！
感谢你们的帮助。
James Dean的粘性页脚技巧怎么样？它非常简洁，不需要特殊的标记。这一切都是用CSS完成的。看看：http://mystrd.at/modern-clean-css-sticky-footer
我不明白为什么不能只将页脚设置为position: fixed？在我看来，这样实现会容易得多。它在IE中不起作用吗？
有时你需要页脚保持在内容流中，例如在处理主部分的背景时。
这里有一些不错的SASS可以与之配合使用 :)
工作起来很完美………… :) <3
注意到一些人在背景无法扩展到浏览器窗口尺寸之外时遇到问题。在我自己遇到同样的问题后，我找到了这个解决方法
更改此内容
为此
你好，
如果.page-wrap具有position:relative，则页脚中的链接会被“覆盖”并且无法工作。
对此有什么解决方案吗？
谢谢
这真是太棒了！！！谢谢！！
为什么当我将“Position: Relative;”设置为主要内容Div时，它会中断？由于我的布局，我的主要内容div需要设置为position relative。有没有办法让它工作？谢谢！
有人可以解释附加到.page-wrap的Lorum Ipsum JS的用途吗？非常感谢。谢谢！
另外，我在IE 8中遇到了问题，但我只需为页脚添加了一个float: left，就解决了问题。
Lorem Ipsum仅用于演示目的。查看结果选项卡。
谢谢！
先生，我有一个小型网络日志，其设计完全响应式，我喜欢它的一切，但问题是网站不是全宽的，当我尝试更改其宽度时，它会丢失对各种屏幕尺寸的响应行为，所以我一直在想，您能否查看一下并帮助我将其转换为全宽。
我想到的另一个选择是在网站上添加两个粘性部分，一个在左侧，一个在右侧，但我不知道如何操作（我的意思是创建粘性部分很容易，但如何在不影响响应能力的情况下将它们放置在网站的所需位置有点困难）我将非常感谢您的建议和帮助
太棒了，Chris！感谢分享。我以前见过它，但直到遇到一个模型之前，我并没有真正考虑过实施它。我知道我可以访问你的网站来获取我需要的代码片段。
我以为使用
{margin:0}
是不好的做法……
我帖子中的星号被删除了。我的意思是说，我认为使用星号选择页面上的所有元素以将边距重置为零被认为是不好的做法。至少，我在某个地方读到过。
这种想法的依据是，该选择器需要选择页面上的所有元素，这比更具体的 ID 选择器（只有一个匹配项）要慢。从技术上讲这是正确的，但在任何速度测试中都不会产生明显的差异。除了在非常极端的情况下。这在过去十年中基本上都是正确的，因此，如果我们能做些什么来消除这种认知，那将是非常棒的。编写适合您的 CSS 选择器，并且不要太担心选择器的性能。
.page-wrap {
min-height: 100%;
}
.page-wrap:after {
content: “”;
display: block;
}
仅仅这段小代码就帮我解决了问题，现在无论我将页面缩小到多远，页脚都粘贴在页面底部，感谢你的帮助，朋友 :)
你好，
使用了这种技术，现在有一个布局包含 .page-wrap，其中包含页眉，下面是内容，.page-wrap 之后是页脚。
现在有一个页面，我需要在内容区域垂直居中一个 div。div 的宽度已知，但高度未知。
这可能吗？
尝试过绝对表格（css）选项，但没有成功。
谢谢
谢谢，
效果很好！
这是我的 Sass 混合。
效果很好，尽管我通过在页脚中添加“overflow:hidden”解决了底部边距问题。
很棒的帖子。
IE7 中有一个错误
页脚切断了正文内容
谁能帮忙？
此致！
你好，
我在我的项目中实现了上述代码。但它根本不起作用。
页脚显示在内容的中央。
请帮忙
这看起来很像我一段时间以来一直在使用的解决方案，但稍微复杂了一些，我想知道我是否遗漏了什么。两者的缺点相同：必须支持
min-height（IE8+）并且必须知道页脚的高度。我想这样你的
.site-footer不会自动宽度为 100%（当然，简单的修复：width: 100%）。但是……我是否错过了其他东西？它在codepen上。在我的代码中需要注意一件事，但我认为它也适用于你的代码：如果 body（或容器）的
min-height: 100%且没有顶部padding，如果你以具有顶部边距的内容开头或以具有底部边距的内容结尾，它将扩展到其父元素之外；也就是说，如果你的body中的第一件事是一个带边距的h1，则h1的边距将导致body基本上具有顶部边距，这意味着页面永远不会像 100% 那样短（它将是 100% + 边距值），并且始终会滚动。在我的 codepen 示例中，我通过在body的顶部添加一些padding来解决这个问题。好奇你的想法，以及我是否忽略了一些需要额外容器等内容的东西。
将页脚的位置设置为 fixed 或 absolute 的问题在于它始终可见。因此，如果您有一个网站，其高度根据您所在的页面而有所不同，那么页脚不会出现在实际页面的底部，而是出现在浏览器窗口的底部。
对于
position: fixed，@Ottaz 是正确的。但position: absolute不是——如果不是容器元素（具有position: relative的元素——在本例中为body）扩展到可视窗口之外。在我的示例中就是这样。position: absolute页脚相对于body的底部绝对定位，而body（当然也应该是）位于可视内容的底部）。谢谢 Ben，这是我找到的拥有粘性页脚的最佳方法。
干杯 :)
这太棒了！非常感谢你，Chris。
您引用了“.push”
.site-footer, .page-wrap:after {
/* .push 的高度必须与页脚相同 */
height: 142px;
}
但我没有看到任何类名为“push”的项目。也许这是文章早期版本中的内容？
确实是一个很棒的方法。不幸的是，我遇到了不同的情况，我有一个位于主要内容区域上方的页眉和一个位于其下方的页脚。所以我编写了这样的代码
它似乎运行良好。但使用这种方法好吗？
当页脚的高度减小时，此方法无法正常工作。所以这不是粘性页脚。
如果您使用的是 border-box 盒子大小（https://css-tricks.cn/box-sizing/，IE8+ 上受支持），您只需添加底部填充以抵消 .page-wrap 上的底部边距并删除添加“push”的代码。
嘿，Chris。感谢你的帮助！除了一个页面之外，其他所有地方都运行良好。
不确定是什么原因导致这个页面上的页脚从底部掉落。
有没有人看到可能是什么问题？
http://kennlucas.com/contact-thanks.htm
我知道这有点过时了，但像过去那样使用表格难道不更容易、而且在任何浏览器上都非常可靠吗？是的，它很老，但它也经过了验证。像这样的代码可以完全按预期工作：http://jsfiddle.net/L6daa/
我使用了这段代码。在 IE8+ 上运行良好。IE7 有什么技巧吗？请帮忙
我想避免不必要的包装器。
我将 HTML 设置为 height:100%、BODY 设置为 min-height: 100%，然后添加 BODY:AFTER 来为页脚创建空间。没有包装器。
效果很好！非常感谢你！！！: )
我正确地使用了该方法，并且评论中做出的修改非常有用。
使用代码后，我遇到了一种情况，即页脚在右侧显示一个空白？
有什么想法吗？
在不同的浏览器中尝试一下，看看页面是否呈现不同，如果是，请在页面中包含 css 重置。
如果您不使用 normalize.css，此方法效果很好，如果您使用，则某些元素的顶部边距会抵消页脚。
我多次使用过这种方法，但在我的第一个使用 normalize 的网站上，我最终切换到了 James Dean 的“Sticky Footer”，如之前的帖子中所述。使用 normalize 可以解决问题。
http://mystrd.at/modern-clean-css-sticky-footer/
刚刚意识到此示例中有一些“错误”。示例中写道
/* .push 的高度必须与页脚相同 */但没有名为 push 的类。它应该写成类似
/* .page-wrap 的 margin-bottom 必须与页脚相同高度*/好的，我将更新该代码示例。埋葬因为不再相关。
到目前为止我见过的最佳方法，干得好。
此方法在具有复杂布局的网站上一直向下兼容到 IE8，而其他几种常用方法则无法做到。这现在是一种常用方法！
酷。这效果很好，而且组合得很好。不过，我尝试了许多方法，但这个方法对我来说效果最好。谢谢。
嘿！我喜欢这个。它很简单也很有用。
我实现了一个“border-radius: 10px;”来增加一些样式。
太棒了！我尝试了很多选项，但这个简直完美！
如果你在
.page-wrap和页脚之间留了一些边距，那么页脚会被视口底部边缘裁剪掉这个边距的尺寸。最简单的解决方案是将此边距转换为.page-wrap或页脚的内边距。非常棒的帮助/提示！谢谢 :)
这会导致渐变背景出现问题。渐变在页脚的开头停止。
HTML/CSS需要一个粘性页脚的默认选项，而不是所有这些变通方法……
谢谢老兄。我一直在尝试找出如何解决这个问题，现在使用你的方法解决了，非常非常感谢！！这个方法100%有效，再次感谢 :)
你好。这是一个很棒的修复。
不过我遇到了一个问题……
当内容很少时，我的内容部分只到某个点，之后我就会留下一个空白间隙（这是我主体默认的颜色）直到页脚。我的内容高度设置为：100%，所以有点令人费解。我的内容高度似乎是固定的，无法超过某个点。
有没有人有什么建议？（你可以在http://www.jamesstok.es看到这个）
谢谢
我遇到了一个问题，我的预览中顶部有一个滑块，但是当我上传到服务器时，它会出现在粘性页脚正上方的右下方。
???
我遇到了一个问题，我的预览中顶部有一个滑块，但是当我上传到服务器时，它会出现在粘性页脚正上方的右下方。
???
http://www.gatheringplace.us/Site/home.html
多年来我一直使用类似的东西。:D
我们有一种这种技术的变体，它只需要设置一个最小高度，并且几乎可以与 Bootstrap 3 一起使用。查看此处的示例
http://mnmtechconsulting.com/proper-sticky-footer
有时，当你为以下内容添加高度时会有帮助
我写了一篇关于这个问题的小文章，使用了视口单位 https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551
为什么这在 Firefox 上不起作用？
大家好。我刚开始学习网页开发，我不明白 CSS 代码的这部分作用
.page-wrap:after {content: "";
display: block;
}
我在 CodePen 中试过，我发现如果没有其中一个，粘性页脚就不会起作用。尽管如此，我还是不明白它在做什么。
谢谢大家 :)
page-wrap div 应该在你的代码中是第一个和最后一个 div，就在你的页脚之前。
：after 选择器会将页脚推到所有内容下方。
我想
这里稍微解释了一下
https://w3schools.org.cn/cssref/sel_after.asp
我做了一些类似的事情，混合使用了 'vh' 属性和 CSS3 'calc()' 方法 - 几乎在所有地方都能工作（除了旧版本的 IE）。
因为它在任何类型的主题/框架中都很容易使用，我认为它是获得粘性页脚最快和最具未来性的解决方案之一。如果我错了，请随时纠正我。;)
谢谢！这解决了问题，更容易。在文章中的方法中，我在 ie11 中遇到了问题。
ie11 中的问题是我使用了 main 标签作为 page-wrapper，并且它没有定义 display:block，因此 after 元素无法正常工作。
我最喜欢的解决方案！
我认为你甚至可以去掉
html, body {
height: 100%;
}
因为由于 'vh'，'.page-wrap' 不再依赖于父元素。
嗨，谢谢你的帮助 ^^
我试过这个，它在 Chrome 桌面版上运行完美。
我认为这在手机上不起作用，是吗？
谢谢
不起作用。你认为可能是为什么？
很棒的教程。我一直在寻找一些可以绕过/与 Adobe Edge 一起使用的方法，这个非常完美。谢谢
这可以使用
flex-box轻松实现多年来我一直使用这种方法，但最近我看到了 Bootstrap 实现相同方法的方式。我只是想知道将“position: relative;”应用于“”标签的效果如何。这是一种正确的方法吗？我认为 html 标签不应该被修改。
我的意思是询问使用这些样式是否属于良好的实践
‘html{ min-height: 100%; position: relative;}
footer{ position: absolute; bottom: 0; width: 100%; height: 60px;}
body{ margin-bottom: 60px;}’
这会在大多数浏览器中使页脚粘住。但不确定这是否是正确的编码规范。你怎么看？
当你将 html 和 body 元素的高度设置为 100% 时，即使出现了滚动条并且页面正在滚动，window.onscroll 事件也不会触发……
这种方法在旧版本浏览器中翻译效果不好吗？
简单且最佳的解决方案。在这种情况下，我们不需要在 html 和 body 标签上添加
height 100%我使用了你的技术 Adam。对我有用。
只是浪费时间:)
页脚粘性（表格）：http://codepen.io/edalis/pen/oLEgGJ
页脚粘性（绝对）：http://codepen.io/edalis/pen/VjyNLE
我认为这个示例在 body 的子元素中使用包装器会更好。
http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
运行完美，谢谢
如果你碰巧有一个
inline-block元素，你可能还需要添加vertical-align:middle;，以避免在某些浏览器上出现不需要的垂直滚动条。示例
HTML 代码
CSS 代码
我认为通过以绝对方式管理页脚效果会更好
http://codepen.io/anon/pen/woPOdX
非常感谢！！我之前一直在寻找这个！
只想提一下，你可以拥有一个粘性页脚，而无需疯狂的技巧，如下所示
查看 CodePen 上 nicolasmn 的笔 粘性页脚 (@nicolasmn) 。
现在我们可以使用
position: sticky演示笔 https://codepen.io/D-Heap/pen/RjwEEr
position: sticky 在所有浏览器上都能正常工作吗？
这个方法对于基本的设置和 Bootstrap 来说很有效 – https://www.prodjex.com/2018/03/create-a-sticky-website-footer/
我在较短的页面上没有看到它起作用。如果内容比窗口高度短，它也能停留在屏幕底部就好了。
footer {
transform: translateY(100vh);
height: 25px;
width: 100%;
text-align: center;
}