小开

最佳答案

要获得一个粘性页脚:

为你的内容设置<div>和class="wrapper"。

右之前 wrapper位置的结束</div> 李<div class="push"></div> . < / p > < / >
右后 wrapper位置的结束</div> 李<div class="footer"></div> . < / p > < / >

* {
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(带有overflow:auto)。

如果这不起作用，您是否有任何页脚显示不正确的截图或示例链接?

小开

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

小开

将#footer的CSS设置为:

position: absolute;
bottom: 0;

然后你需要在你的#sidebar和#content的底部添加一个padding或margin来匹配#footer的高度，或者当它们重叠时，#footer将覆盖它们。

此外，如果我没记错的话，IE6在bottom: 0 CSS上有一个问题。你可能不得不为IE6使用JS解决方案(如果你关心IE6的话)。

小开

你可以使用position: absolute following来将页脚放在页面的底部，但随后要确保你的两列有适当的margin-bottom，这样它们就不会被页脚遮挡。

#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}

小开

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

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

我尝试过的唯一一个在所有浏览器上都可以工作的无脚本解决方案:一个更简单/更短的表，包含thead(用于标题)/tfoot(用于页脚)/tbody (td’s用于任意数量的列)和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;和所需高度的页脚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>

小开

使用CSS vh单位!

可能处理sticky footer最明显和最不俗气的方法是使用新的CSS视口单元。

以下面的简单标记为例:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

如果页眉高80px，页脚高40px，那么我们可以在content div上创建sticky footer 只有一条规则:

.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>

< p >…下面是相同的代码如何处理content 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在一个calc规则中有一个视口单位的问题。这确实已经被修复(在这里看到的)，所以没有问题。然而，如果你因为某些原因想避免使用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;
}

然而，在post中没有提到的属性是body标签上的位置:静态，大概是因为它通常是默认的。相对位置无效!

我的wordpress主题覆盖了默认的主体显示，这让我困惑了很长一段时间。

小开

带有`display: flex`的粘脚

受菲利普·沃尔顿的粘脚启发的解决方案。

解释

这个解决方案是仅适用于:

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

它基于flex显示，利用flex-grow属性，该属性允许元素在高度或宽度中成长(当flow-direction分别设置为column或row时)，以占用容器中的额外空间。

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

视口高度的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>

你可以在的JSFiddle处使用它。

Safari怪癖

注意，Safari有flex-shrink属性有缺陷的实现，它允许项目缩小到显示内容所需的最小高度以上。要解决这个问题，你必须显式地将上面例子中的.content和footer的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;
}

优雅的工作无处不在。

小开

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"}

不需要将它放在document ready事件中。就这样，它会运行得很好。它会重新计算你的页脚的位置，当页面被加载，当窗口被调整大小。

下面是插件的代码，你不需要理解。只要知道如何实施就行了。它为你工作。但是，如果您想知道它是如何工作的，只需查看代码即可。我给你留言了。

//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计算出页面的最小高度，页脚仍然在底部，希望这有助于一些人:)

小开

一个老线程我知道，但如果你正在寻找一个响应式的解决方案，这个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解决方案:< / p >

@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;
}

小开

对于自然的页眉和页脚高度使用CSS Flexbox。

参见JS Fiddle。

超文本标记语言

<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>

小开

flex解决方案对我来说是有效的，因为它使页脚变得有粘性，但不幸的是，将页面主体改为使用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/得到了这个

小开

由于网格的解决方案还没有被提出，这里只有两个声明的父元素，如果我们认为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

项目均匀地分布在对齐容器中横轴。每对相邻项之间的间距为相同。第一项与主启动边齐平，最后一项与主启动边齐平项与主端边缘齐平。
.

小开

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;。然后确保页脚是主体中的最后一个元素。

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

小开

react友好的解决方案-(不需要分隔符div)

Chris coyer(值得尊敬的CSS-Tricks网站)一直在更新他的页黏脚，现在至少有五种方法来创建粘性页脚，包括使用FlexBox和CSS-Grid。

为什么这很重要?因为，对我来说，我多年来使用的早期/旧方法不适用于React -我不得不使用Chris的flexbox解决方案-这是< >强容易< / >强和<强> < /工作强有力的>。

下面是他的CSS-Tricks flexbox粘性页脚 -只要看看下面的代码，它不可能更简单。

(下面的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解决方案。

引用:

CSS-Tricks -一个完整的指南，Flexbox

小开

看一下http://1linelayouts.glitch.me/，例4。Una Kravets解决了这个问题。

这将创建一个带有页眉、主页和页脚的3层页面。

-你的页脚将始终停留在底部，并使用空间来适应内容;

-你的标题将始终保持在顶部，并使用空间来适应内容

-你的主系统总是会使用所有可用的剩余空间(剩余的部分空间)，如果需要，足够填满整个屏幕。

超文本标记语言

<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;
}

小开

我发明了一个非常简单的解决方法，对我来说非常有用。您只需在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%;
}

将body显示为flex，方向为column:

body {
min-height: 100%;
display: flex;
flex-direction: column;
}

为main添加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 > &copy; Copyright 2021</p>
</div>
</footer>
</body>

小开

保持你的<main>为min-height 90vh将永远解决你的问题。下面是基本结构，它将帮助您遵循语义并覆盖整个页面

除了页眉和页脚，所有内容都放在主标签内。

<body>
<header>
<!╌ nav, logo ╌>
</header>
<main>
<!╌ section and div ╌>
</main>
<footer>
<!╌ nav, logo ╌>
</footer>
</body>

为main添加min-height: 90vh

main{
min-height: 90vh;
}

通常，页眉和页脚的最低高度是70px，所以这种情况下工作良好，尝试和测试!

如何让页脚保持在网页的底部?

使用CSS vh单位!

带有display: flex的粘脚

解释

实现

Safari怪癖

react友好的解决方案-(不需要分隔符div)

引用:

超文本标记语言

CSS

带有`display: flex`的粘脚