我有一个简单的 2 列布局，其页脚可以清除标记中的左右 div。我的问题是我无法让页脚在所有浏览器中都停留在页面底部。如果内容将页脚向下推，它会起作用，但情况并非总是如此。
【问题讨论】：
标签： css html footer sticky-footer
要获得粘性页脚：
为您的内容提供<div> 和class="wrapper"。
右之前wrapper 的结束</div> 放置
<div class="push"></div>。
右之后wrapper的结束</div>放置
<div class="footer"></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 */
}
【讨论】：
尝试在内容和侧边栏周围放置一个容器 div（带有溢出：自动）。
如果这不起作用，您是否有没有正确显示页脚的屏幕截图或示例链接？
【讨论】：
一种解决方案是为盒子设置最小高度。不幸的是，似乎it's not well supported by IE（惊讶）。
【讨论】：
将#footer 的 CSS 设置为：
position: absolute;
bottom: 0;
然后您需要在#sidebar 和#content 的底部添加padding 或margin 以匹配#footer 的高度，或者当它们重叠时，#footer 将覆盖它们。
另外，如果我没记错的话，IE6 的bottom: 0 CSS 有问题。您可能必须为 IE6 使用 JS 解决方案（如果您关心 IE6）。
【讨论】：
您可以使用position: absolute 将页脚放在页面底部，但请确保您的 2 列具有适当的margin-bottom，以免它们被页脚遮挡。
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
【讨论】：
0pxs 都应该只是0。
这些纯 css 解决方案都不适用于动态调整内容大小（至少在 firefox 和 Safari 上），例如，如果您在容器 div 上设置了背景，则页面然后调整大小（添加几行）内的表格div，表格可以伸出样式区域的底部，即，您可以在黑色主题上将一半的表格设为白色，而将一半的表格完全设为白色，因为字体颜色和背景颜色都是白色。主题滚动页面基本上无法修复。
嵌套 div 多列布局是一种丑陋的 hack，而用于粘贴页脚的 100% 最小高度主体/容器 div 是一种丑陋的 hack。
唯一适用于我尝试过的所有浏览器的非脚本解决方案：一个更简单/更短的表，其中包含 thead（用于页眉）/tfoot（用于页脚）/tbody（用于任意数量列的 td）和 100 ％ 高度。但这有明显的语义和 SEO 缺点（tfoot 必须出现在 tbody 之前。ARIA 角色可能有助于体面的搜索引擎）。
【讨论】：
这是一个使用 jQuery 的解决方案，就像一个魅力。它检查窗口的高度是否大于主体的高度。如果是，则它会更改页脚的页边距顶部以进行补偿。在 Firefox、Chrome、Safari 和 Opera 中测试。
$( function () {
var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
$( '#footer' ).css( 'margin-top', height_diff );
}
});
如果您的页脚已经有一个顶部边距（例如 50 像素），您需要将最后一部分更改为：
css( 'margin-top', height_diff + 50 )
【讨论】：
使用绝对定位和 z-index 使用以下步骤在任何分辨率下创建粘性页脚 div：
position: absolute; bottom: 0; 和所需高度创建页脚 divdiv，用position: relative; min-height: 100%;包裹正文内容
div添加底部填充，等于高度加上页脚的填充z-index 设置为大于容器div
这是一个例子：
<!doctype html>
<html>
<head>
<title>Sticky Footer</title>
<meta charset="utf-8">
<style>
.wrapper { position: relative; min-height: 100%; }
.footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
.column { height: 2000px; padding-bottom: 300px; background-color: grxqeen; }
/* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */
</style>
</head>
<body>
<div class="wrapper">
<div class="column">
<span>hello</span>
</div>
<div class="footer">
<p>This is a test. This is only a test...</p>
</div>
</div>
</body>
</html>【讨论】：
可能最明显和最简单的方法是使用新的css viewport units。
以下面的简单标记为例：
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
如果页眉是 80 像素高，页脚是 40 像素高，那么我们可以在内容 div 上使用一条规则制作我们的粘性页脚：
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
}
这意味着：让内容 div 的高度至少是视口高度的 100% 减去页眉和页脚的组合高度。
就是这样。
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>...下面是相同的代码如何处理内容 div 中的大量内容：
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
This is my footer
</footer>注意：
1) 必须知道页眉和页脚的高度
2) 旧版本的 IE (IE8-) 和 Android (4.4-) 不支持视口单元。 (caniuse)
3) 曾几何时，webkit 在计算规则中的视口单元存在问题。这确实已经修复（see here）所以那里没有问题。但是，如果您出于某种原因希望避免使用 calc，您可以使用负边距和使用 box-sizing 填充来解决这个问题 -
像这样：
* {
margin:0;padding:0;
}
header {
background: yellow;
height: 80px;
position:relative;
}
.content {
min-height: 100vh;
background: pink;
margin: -80px 0 -40px;
padding: 80px 0 40px;
box-sizing:border-box;
}
footer {
height: 40px;
background: aqua;
}<header>header goes here</header>
<div class="content">Lorem ipsum
</div>
<footer>
This is my footer
</footer>【讨论】：
CSS：
#container{
width: 100%;
height: 100vh;
}
#container.footer{
float:left;
width:100%;
height:20vh;
margin-top:80vh;
background-color:red;
}
HTML：
<div id="container">
<div class="footer">
</div>
</div>
如果您正在寻找在页面底部对齐的响应式页脚，这应该可以解决问题，它始终保持视口高度的 80% 的上边距。
【讨论】：
很多人已经把这个简单问题的答案放在这里了，但我要补充一件事，考虑到在我弄清楚自己做错了什么之前我是多么沮丧。
如前所述，最直接的方法就是这样......
html {
position: relative;
min-height: 100%;
}
body {
background-color: transparent;
position: static;
height: 100%;
margin-bottom: 30px;
}
.site-footer {
position: absolute;
height: 30px;
bottom: 0px;
left: 0px;
right: 0px;
}
但是帖子中没有提到的属性，大概是因为它通常是默认的，是 position: static 在 body 标签上。相对位置不起作用！
我的 wordpress 主题覆盖了默认的正文显示，这让我困惑了很长时间。
【讨论】：
display: flex 的粘滞页脚
受Philip Walton's sticky footer启发的解决方案。
这个解决方案是valid only for:
它基于flex display，利用flex-grow 属性，允许元素在height 或width 增长 >（当flow-direction分别设置为column或row时），占用容器中的额外空间。
我们还将利用vh 单元，其中1vh 是defined as：
视口高度的 1/100
因此，100vh 的高度是告诉元素跨越整个视口高度的简洁方式。
这是您构建网页的方式：
----------- body -----------
----------------------------
---------- footer ----------
----------------------------
为了让页脚贴在页面底部，您希望正文和页脚之间的空间尽可能地增长，以将页脚推到页面底部。
因此我们的布局变成：
----------- body -----------
----------------------------
---------- spacer ----------
<- This element must grow in height
----------------------------
---------- footer ----------
----------------------------
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.spacer {
flex: 1;
}
/* make it visible for the purposes of demo */
.footer {
height: 50px;
background-color: red;
}<body>
<div class="content">Hello World!</div>
<div class="spacer"></div>
<footer class="footer"></footer>
</body>你可以在the JSFiddle玩它。
请注意，Safari 有一个flawed implementation of the flex-shrink property，它允许项目缩小到超过显示内容所需的最小高度。
要解决此问题，您必须在上例中将 flex-shrink 属性显式设置为 0 到 .content 和 footer：
.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;
}
优雅地工作在任何地方。
【讨论】：
.Site-content 元素与spacer 的作用相同。它只是叫法不同。
.Site-content 在这个标记中有一个模拟 .content .. 但没关系，我问这个案例 gcedo 对此有一些具体的想法，无需猜测
jQuery 跨浏览器自定义插件 - $.footerBottom()
或者像我一样使用jQuery，将页脚高度设置为auto 或fix，无论你喜欢什么，它都可以正常工作。此插件使用 jQuery 选择器，因此要使其正常工作，您必须将 jQuery 库包含到您的文件中。
这是您运行插件的方式。导入jQuery，复制这个自定义jQuery插件的代码，导入jQuery后导入即可！它非常简单和基本，但很重要。
当你这样做时，你所要做的就是运行这段代码：
$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer"
// by setting target to {target:"div.footer"}
没有必要将它放在文档就绪事件中。它将运行良好。当页面加载和调整窗口大小时，它将重新计算页脚的位置。
这里是插件的代码，你不必看懂。只知道如何实现它。它为您完成工作。但是，如果您想知道它是如何工作的，只需查看代码即可。我给你留了cmets。
//import jQuery library before this script
// Import jQuery library before this script
// Our custom jQuery Plugin
(function($) {
$.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
var defaults = {
target: "footer",
container: "html",
innercontainer: "body",
css: {
footer: {
position: "absolute",
left: 0,
bottom: 0,
},
html: {
position: "relative",
minHeight: "100%"
}
}
};
options = $.extend(defaults, options);
// JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
$(options.target).css({
"position": options.css.footer.position,
"left": options.css.footer.left,
"bottom": options.css.footer.bottom,
});
$(options.container).css({
"position": options.css.html.position,
"min-height": options.css.html.minHeight,
});
function logic() {
var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
$(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
$(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
};
// DEFINE WHEN TO RUN FUNCTION
$(window).on('load resize', function() { // Run on page loaded and on window resized
logic();
});
// RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
// return this.each(function() {
// this.checked = true;
// });
// return this;
};
})(jQuery); // End of plugin
// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5/* Set your footer CSS to what ever you like it will work anyway */
footer {
box-sizing: border-box;
height: auto;
width: 100%;
padding: 30px 0;
background-color: black;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
<div class="content">
<header>
<nav>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
</header>
<section>
<p></p>
<p>Lorem ipsum...</p>
</section>
</div>
<footer>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
</footer>【讨论】：
对于这个问题，我看到的许多答案都很笨拙，难以实施且效率低下，所以我想我会试一试并想出我自己的解决方案，这只是一点点 css 和 html
html,
body {
height: 100%;
margin: 0;
}
.body {
min-height: calc(100% - 2rem);
width: 100%;
background-color: grey;
}
.footer {
height: 2rem;
width: 100%;
background-color: yellow;
}<body>
<div class="body">test as body</div>
<div class="footer">test as footer</div>
</body>这可以通过设置页脚的高度，然后使用 css calc 计算出页脚仍位于底部的页面的最小高度，希望这对某些人有所帮助:)
【讨论】：
我知道一个旧线程，但如果您正在寻找响应式解决方案，这个 jQuery 添加会有所帮助：
$(window).on('resize',sticky);
$(document).bind("ready", function() {
sticky();
});
function sticky() {
var fh = $("footer").outerHeight();
$("#push").css({'height': fh});
$("#wrapper").css({'margin-bottom': -fh});
}
完整指南可在此处找到：https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/
【讨论】：
我创建了一个非常简单的库https://github.com/ravinderpayal/FooterJS
使用起来非常简单。包含库后，只需调用这行代码即可。
footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));
可以通过调用具有不同参数/ id 的上述函数来动态更改页脚。
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
注意：- 您无需更改或添加任何 CSS。库是动态的，这意味着即使在加载页面后调整屏幕大小，它也会重置页脚的位置。我创建了这个库，因为 CSS 暂时解决了这个问题，但是当显示尺寸发生显着变化时，从桌面到平板电脑或反之亦然，它们要么与内容重叠，要么不再保持粘性。
另一个解决方案是 CSS 媒体查询，但是你必须为不同大小的屏幕手动编写不同的 CSS 样式，而这个库会自动完成它的工作，并且所有基本的 JavaScript 支持浏览器都支持。
编辑 CSS 解决方案：
@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
/* For mobile phones: */
#footer {
width: 100%;
position:fixed;
bottom:0;
}
}
现在，如果显示的高度超过您的内容长度，我们会将页脚固定在底部，如果没有，它将自动出现在显示的最后，因为您需要滚动查看。
而且，它似乎是比 JavaScript/库更好的解决方案。
【讨论】：
我之前对这个页面上建议的解决方案没有任何运气，但最后，这个小技巧奏效了。我会把它作为另一种可能的解决方案。
footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
【讨论】：
Flex 布局是自然页眉和页脚高度的首选。这个 flex 解决方案在现代浏览器中经过测试，并且在 IE11 中确实有效:)。
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html {
height: 100%;
}
body {
height: 100%;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
flex-shrink: 0;
}
header,
footer {
flex: none;
}
【讨论】：
我自己有时也为此苦苦挣扎，我总是发现所有这些 div 相互包含的解决方案是一个混乱的解决方案。 我只是弄乱了一点，我个人发现这是可行的，而且它肯定是最简单的方法之一：
html {
position: relative;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
我喜欢这个的地方在于不需要应用额外的 HTML。您可以简单地添加此 CSS，然后随时编写您的 HTML
【讨论】：
对我来说，最好的显示方式（页脚）是贴在底部但不一直覆盖内容：
#my_footer {
position: static
fixed; bottom: 0
}
【讨论】：
与@gcedo 类似的解决方案，但不需要添加中间内容以将页脚向下推。我们可以简单地将margin-top:auto添加到页脚，无论他的高度还是上面内容的高度，它都会被推到页面底部。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
.content {
padding: 50px;
background: red;
}
.footer {
margin-top: auto;
padding:10px;
background: green;
}<div class="content">
some content here
</div>
<footer class="footer">
some content
</footer>【讨论】：
.content flex: 1 0 auto; 使其可增长且不可收缩，但margin-top: auto; 是一个很好的技巧，涉及样式页脚，而不是“无关”@987654329 @这很好。实际上，我想知道为什么这种方法需要 flex..
display:flex它不会工作，你会有一个正常的块元素流
margin:0 auto 到中心块元素）但我们不'没有任何列方向，因此顶部/底部没有边距自动。 Flexbox 具有行/列方向 ;)。这是细微的差别，但在 flexbox 中也使用边距来对齐元素，因此即使在行方向内，您也可以使用边距顶部/底部自动垂直对齐。您可以在此处阅读更多信息：w3.org/TR/css-flexbox-1/#auto-margins
flex 解决方案在使页脚变粘方面对我有用，但不幸的是，将 body 更改为使用 flex 布局使我们的一些页面布局发生了变化，而不是变得更好。最终对我有用的是：
jQuery(document).ready(function() {
var fht = jQuery('footer').outerHeight(true);
jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");
});
我从 ctf0 在https://css-tricks.com/couple-takes-sticky-footer/ 的回复中得到了这个
【讨论】：
由于尚未提出 Grid 解决方案，因此，如果我们采用 height: 100%和margin: 0 理所当然：
html, body {height: 100%}
body {
display: grid; /* generates a block-level grid */
align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
margin: 0;
}
.content {
background: lightgreen;
/* demo / for default snippet window */
height: 1em;
animation: height 2.5s linear alternate infinite;
}
footer {background: lightblue}
@keyframes height {to {height: 250px}}<div class="content">Content</div>
<footer>Footer</footer>项目沿对齐容器均匀分布 交叉轴。每对相邻项目之间的间距为 相同的。第一项与主开始边缘齐平，最后一项 项目与主端边缘齐平。
【讨论】：
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
border: 3px solid #73AD21;
}<body style="height:1500px">
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>【讨论】：
如果您不希望它使用固定位置，并且在移动设备上烦人地跟踪您，那么到目前为止这似乎对我有用。
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%; 和position: relative;，然后在页脚设置position: absolute; bottom: 0; left: 0;。然后我确保页脚是正文中的最后一个元素。
如果这对其他人不起作用，请告诉我，以及为什么。我知道这些乏味的风格技巧在我没有想到的各种情况下会表现得很奇怪。
【讨论】：
Chris Coyier（著名的 CSS-Tricks 网站）已将他的 page on the Sticky-Footer 保持在最新状态，现在至少有五种方法可以创建粘性页脚，包括使用 FlexBox 和 CSS-Grid。
为什么这很重要？因为，对我来说，我多年来使用的较早/较旧的方法不适用于 React - 我不得不使用 Chris 的 flexbox 解决方案 - easy 和 工作。
下面是他的CSS-Tricks flexbox Sticky Footer - 看看下面的代码，不可能再简单了。
（（下面的）StackSnippet 示例没有完美呈现示例的底部。页脚显示为超出屏幕底部，这在现实生活中不会发生。）
html,body{height: 100%;}
body {display:flex; flex-direction:column;}
.content {flex: 1 0 auto;} /* flex: grow / shrink / flex-basis; */
.footer {flex-shrink: 0;}
/* ---- BELOW IS ONLY for demo ---- */
.footer{background: palegreen;}<body>
<div class="content">Page Content - height expands to fill space</div>
<footer class="footer">Footer Content</footer>
</body>Chris 还为喜欢网格的人演示了这个CSS-Grid solution。
【讨论】：
查看http://1linelayouts.glitch.me/，示例 4。Una Kravets 解决了这个问题。
这将创建一个包含页眉、主页和页脚的 3 层页面。
-您的页脚将始终停留在底部，并使用空间来适应内容；
-您的标题将始终保持在顶部，并使用空间来适应内容；
-如果需要，您的 main 将始终使用所有可用的剩余空间（剩余空间的一部分），足以填满屏幕。
<div class="parent">
<header class="blue section" contenteditable>Header</header>
<main class="coral section" contenteditable>Main</main>
<footer class="purple section" contenteditable>Footer Content</footer>
</div>
.parent {
display: grid;
height: 95vh; /* no scroll bars if few content */
grid-template-rows: auto 1fr auto;
}
【讨论】：
刚刚发明了一个非常简单的解决方案，对我来说非常有用。您只需将除页脚之外的所有页面内容包装在一个 div 中，然后将 min-height 设置为视点的 100% 减去页脚的高度。无需在页脚或多个包装 div 上进行绝对定位。
.page-body {min-height: calc(100vh - 400px);} /*Replace 400px with your footer height*/【讨论】：
在我经常使用的网站上：
position: fixed;
...在我的 CSS 中作为页脚。这会将其锚定到页面底部。
【讨论】：
使用 flex 快速简单的解决方案
html和body一个高度100%
html,
body {
width: 100%;
height: 100%;
}
flex，方向为column：body {
min-height: 100%;
display: flex;
flex-direction: column;
}
flex-grow: 1
main {
flex-grow: 1;
}
flex-grow指定应将弹性容器中的剩余空间分配给项目（弹性增长因子）。
*,
*::after,
*::before{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
footer{
background-color: black;
color: white;
padding: 1rem 0;
display: flex;
justify-content: center;
align-items: center;
}<body>
<main>
<section >
Hero
</section>
</main>
<footer >
<div>
<p > © Copyright 2021</p>
</div>
</footer>
</body>【讨论】：