如何让页脚留在网页底部？
Posted
技术标签:
【中文标题】如何让页脚留在网页底部？【英文标题】：How do you get the footer to stay at the bottom of a Web page? 【发布时间】：2021-09-27 09:26:40 【问题描述】：我有一个简单的 2 列布局，其页脚可以清除标记中的左右 div。我的问题是我无法让页脚在所有浏览器中都停留在页面底部。如果内容将页脚向下推，它会起作用，但情况并非总是如此。
【问题讨论】：
我将添加到@Jimmy：您还需要为包含页脚的元素声明绝对（或相对）定位。在您的情况下，它是 body 元素。编辑：我在你的页面上用 firebug 对其进行了测试，它似乎工作得很好...... 可能你需要将 html-page-to-full-height 拉伸为这个链接所说的：makandracards.com/makandra/… 【参考方案1】：要获得粘性页脚：
为您的内容提供<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 */
【讨论】：
@jlp：您需要在 height:100% 语句中添加表单标签，否则会破坏粘性页脚。像这样：html、body、form height: 100%; 我注意到向页脚添加填充会拧紧它，但发现可以通过从 footer, push 高度中减去页脚上的额外填充来解决这个问题。 本站提供demo的详细说明：CSS Sticky Footer 嘿，我按照您的步骤操作，它适用于大页面。但是在用户无法向下滚动的小页面上，页脚在底部有点远。所以它使一个几乎空的页面可以滚动。任何人都知道如何解决这个问题？你可以在这里查看我的测试页面sheltered-escarpment-6887.herokuapp.com @Syk 我发现减少最小高度会有所帮助。 94% 是一个不错的值，但您仍然会在移动设备上看到问题 :( 不确定这里是否有真正的解决方案。【参考方案2】：使用 CSS vh 单位！
可能最明显和最简单的方法是使用新的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>【讨论】：
这几乎是我在这里看到的最好的解决方案，即使在我奇怪的情况下也可以工作，因为 .content 的一些内容溢出到页脚中，谁知道是什么原因。而且我猜想使用 Sass 和变量之类的东西，它可能会更加灵活。 确实，这个作品就像一个魅力。对于不支持的浏览器也很容易回退。 怎么弄乱绝对测量不仍然是hacky？充其量它可能 less hacky 但是，如果页脚和页眉的高度以百分比而不是 px 来测量？喜欢页面高度的 15%？ 在根据滚动位置隐藏或显示地址栏的移动浏览器上，视口单元并不总是按预期工作【参考方案3】：带有display: flex 的粘滞页脚
受Philip Walton's sticky footer启发的解决方案。
说明
这个解决方案是valid only for:
铬≥21.0 火狐≥20.0 Internet Explorer ≥ 10 Safari ≥ 6.1它基于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 怪癖
请注意，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;
优雅地工作在任何地方。
【讨论】：
我觉得这是正确的答案，因为它实际上是唯一有效的方法，即使页脚的高度未知。 这会用 Neat 2 搞乱网格 但为什么不是 Philip Walton 的解决方案本身，为什么要额外的“间隔”元素？ @YakovL 在 Walton 的解决方案中，.Site-content 元素与spacer 的作用相同。它只是叫法不同。
@Gherman 好吧，.Site-content 在这个标记中有一个模拟 .content .. 但没关系，我问这个案例 gcedo 对此有一些具体的想法，无需猜测【参考方案4】：
您可以使用position: absolute 将页脚放在页面底部，但请确保您的 2 列具有适当的margin-bottom，以免它们被页脚遮挡。
#footer
position: absolute;
bottom: 0px;
width: 100%;
#content, #sidebar
margin-bottom: 5em;
【讨论】：
我用类似的设置（两列+页脚）尝试过这个，但它不起作用。 如果内容增长，它会与内容重叠。 这就是内容底部有边距的原因。您必须将其设置为您制作页脚的任何固定高度。 对于它的价值，如果某个东西是零值，那么无论它是什么测量单位，什么都不是，所以我见过的所有样式表中的所有0pxs 都应该只是0。
如果页面高度大于显示器的高度或页脚的内容长度是动态的怎么办？查看我的答案以解决此问题。【参考方案5】：
这是一个使用 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 )
【讨论】：
另一种方法是在页脚之前添加一个“推动器”div。然后设置 pusher div 的高度。这避免了必须处理现有的 margin-top 查看我的答案以获得无 js 解决方案。【参考方案6】：将#footer 的 CSS 设置为：
position: absolute;
bottom: 0;
然后您需要在#sidebar 和#content 的底部添加padding 或margin 以匹配#footer 的高度，或者当它们重叠时，#footer 将覆盖它们。
另外，如果我没记错的话，IE6 的bottom: 0 CSS 有问题。您可能必须为 IE6 使用 JS 解决方案（如果您关心 IE6）。
【讨论】：
当窗口太小时，页脚会显示在带有这个css的内容前面。 看我的回答@Seichi【参考方案7】：与@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..
@YakovL 是的，这里的主要思想是margin-top技巧；）我知道我可以制作这样的内容，但它与之前的想法几乎相同内容的页脚......在这里我想避免这种情况，只用边距推动页脚；）
@YakovL flex 需要 margin:auto :) 没有它我们不能使用它......因为 margin:auto 与 flex 项目的行为略有不同，然后阻止项目。如果你删除display:flex它不会工作，你会有一个正常的块元素流
是的，我可以看到没有它就行不通，但我不明白为什么（什么是“略有不同”）
@YakovL 很简单，使用普通块元素，流始终是行方向，因此只有与 auto 一起使用的边距右/左才能起作用（就像著名的 margin:0 auto 到中心块元素）但我们不'没有任何列方向，因此顶部/底部没有边距自动。 Flexbox 具有行/列方向 ;)。这是细微的差别，但在 flexbox 中也使用边距来对齐元素，因此即使在行方向内，您也可以使用边距顶部/底部自动垂直对齐。您可以在此处阅读更多信息：w3.org/TR/css-flexbox-1/#auto-margins【参考方案8】：
我自己有时会为此苦苦挣扎，我总是发现所有这些 div 相互包含的解决方案是一个混乱的解决方案。 我只是弄乱了一点，我个人发现这是可行的，而且它肯定是最简单的方法之一：
html
position: relative;
html, body
margin: 0;
padding: 0;
min-height: 100%;
footer
position: absolute;
bottom: 0;
我喜欢这个的地方在于不需要应用额外的 HTML。您可以简单地添加此 CSS，然后随时编写您的 HTML
【讨论】：
这对我有用，但是我在页脚中添加了 width:100%。【参考方案9】：由于尚未提出 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>align-content: space-between
项目沿对齐容器均匀分布 交叉轴。每对相邻项目之间的间距为 相同的。第一项与主开始边缘齐平，最后一项 项目与主端边缘齐平。
【讨论】：
【参考方案10】：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% 的上边距。
【讨论】：
【参考方案11】：对于这个问题，我看到的许多答案都很笨拙，难以实施且效率低下，所以我想我会试一试并想出我自己的解决方案，这只是一点点 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 计算出页脚仍位于底部的页面的最小高度，希望这对某些人有所帮助:)
【讨论】：
【参考方案12】：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>【讨论】：
【参考方案13】：使用绝对定位和 z-index 使用以下步骤在任何分辨率下创建粘性页脚 div：
使用position: absolute; bottom: 0; 和所需高度创建页脚 div
设置页脚的填充以在内容底部和窗口底部之间添加空白
创建一个容器div，用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>【讨论】：
【参考方案14】：一种解决方案是为盒子设置最小高度。不幸的是，似乎it's not well supported by IE（惊讶）。
【讨论】：
【参考方案15】：这些纯 css 解决方案都不适用于动态调整内容的大小（至少在 firefox 和 Safari 上），例如，如果您在容器 div 上设置了背景，然后在页面中调整大小（添加几行）表div，表格可以伸出样式区域的底部，即，您可以在黑色主题上将一半的表格设为白色，而将一半的表格完全设为白色，因为字体颜色和背景颜色都是白色。主题滚动页面基本上无法修复。
嵌套 div 多列布局是一种丑陋的 hack，而用于粘贴页脚的 100% 最小高度主体/容器 div 是一种丑陋的 hack。
唯一适用于我尝试过的所有浏览器的非脚本解决方案：一个更简单/更短的表，其中包含 thead（用于页眉）/tfoot（用于页脚）/tbody（用于任意数量列的 td）和 100 ％ 高度。但这有明显的语义和 SEO 缺点（tfoot 必须出现在 tbody 之前。ARIA 角色可能有助于体面的搜索引擎）。
【讨论】：
【参考方案16】：很多人已经把这个简单问题的答案放在这里了，但我要补充一件事，考虑到在我弄清楚自己做错了什么之前我是多么沮丧。
如前所述，最直接的方法就是这样......
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 主题覆盖了默认的正文显示，这让我困惑了很长时间。
【讨论】：
【参考方案17】：我知道一个旧线程，但如果您正在寻找响应式解决方案，这个 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/
【讨论】：
【参考方案18】：我创建了一个非常简单的库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/库更好的解决方案。
【讨论】：
【参考方案19】：我之前对这个页面上建议的解决方案没有任何运气，但最后，这个小技巧奏效了。我会把它作为另一种可能的解决方案。
footer
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
【讨论】：
【参考方案20】：弹性盒解决方案
Flex 布局是自然页眉和页脚高度的首选。这个 flex 解决方案在现代浏览器中经过测试，并且在 IE11 中确实有效:)。
See JS Fiddle.
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;
【讨论】：
【参考方案21】：对我来说，最好的显示方式（页脚）是贴在底部但不一直覆盖内容：
#my_footer
position: static
fixed; bottom: 0
【讨论】：
这个语法正确吗？位置应该是静态的还是固定的？【参考方案22】：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>【讨论】：
Vanilla java-script 比插件少。【参考方案23】：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/ 的回复中得到了这个
【讨论】：
【参考方案24】：如果您不希望它使用固定位置，并且在移动设备上烦人地跟踪您，那么到目前为止这似乎对我有用。
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;。然后我确保页脚是正文中的最后一个元素。
如果这对其他人不起作用，请告诉我，以及为什么。我知道这些乏味的风格技巧在我没有想到的各种情况下会表现得很奇怪。
【讨论】：
【参考方案25】：对 REACT 友好的解决方案 -（不需要分隔符 div）
Chris Coyier（著名的 CSS-Tricks 网站）已将他的 page on the Sticky-Footer 保持在最新状态，现在至少有五种方法可以创建粘性页脚，包括使用 FlexBox 和 CSS-Grid。
为什么这很重要？因为，对我来说，我多年来使用的较早/较旧的方法不适用于 React - 我不得不使用 Chris 的 flexbox 解决方案 - easy 和 工作。
下面是他的CSS-Tricks flexbox Sticky Footer - 看看下面的代码，不可能再简单了。
（（下面的）StackSnippet 示例没有完美呈现示例的底部。页脚显示为超出屏幕底部，这在现实生活中不会发生。）
html,bodyheight: 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 ---- */
.footerbackground: palegreen;<body>
<div class="content">Page Content - height expands to fill space</div>
<footer class="footer">Footer Content</footer>
</body>Chris 还为喜欢网格的人演示了这个CSS-Grid solution。
参考资料：
CSS-Tricks - A Complete Guide to Flexbox
【讨论】：
【参考方案26】：查看http://1linelayouts.glitch.me/，示例 4。Una Kravets 解决了这个问题。
这将创建一个包含页眉、主页和页脚的 3 层页面。
-您的页脚将始终停留在底部，并使用空间来适应内容；
-您的标题将始终保持在顶部，并使用空间来适应内容；
-如果需要，您的 main 将始终使用所有可用的剩余空间（剩余空间的一部分），足以填满屏幕。
HTML
<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>
CSS
.parent
display: grid;
height: 95vh; /* no scroll bars if few content */
grid-template-rows: auto 1fr auto;
【讨论】：
【参考方案27】：刚刚发明了一个非常简单的解决方案，对我来说非常有用。您只需将除页脚之外的所有页面内容包装在一个 div 中，然后将 min-height 设置为视点的 100% 减去页脚的高度。无需在页脚或多个包装 div 上进行绝对定位。
.page-body min-height: calc(100vh - 400px); /*Replace 400px with your footer height*/【讨论】：
【参考方案28】：在我经常使用的网站上：
position: fixed;
...在我的 CSS 中作为页脚。这会将其锚定到页面底部。
【讨论】：
【参考方案29】：使用 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>【讨论】：
【参考方案30】：尝试在内容和侧边栏周围放置一个容器 div（带有溢出：自动）。
如果这不起作用，您是否有任何页脚未正确显示的屏幕截图或示例链接？
【讨论】：
以上是关于如何让页脚留在网页底部？的主要内容，如果未能解决你的问题，请参考以下文章