CSS使HTML页脚保持在页面底部的最低高度，但不重叠页面

我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。

我想让页脚

  • 当页面较短且屏幕未被填充时，坚持在窗口底部
  • 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。

CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。

1603648 次浏览
小开

这就是所谓的粘性页脚。谷歌搜索会显示很多结果。一个CSS粘脚是我成功使用过的。但还有更多。

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>

此代码的源代码

小开
最佳答案

一个简单的方法是将页面主体设置为100%，并将100%的min-height也设置为100%。如果你的页脚的高度没有改变，这工作得很好。

给页脚一个负的margin-top:

footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
小开

需要警惕的一件事是移动设备，因为它们以一种“不寻常”的方式实现视口的想法:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

因此，使用position: fixed;(正如我在其他地方看到的推荐)通常不是正确的方法。当然，这取决于你所追求的具体行为。

我所使用的，并且在桌面和移动设备上运行良好的方法是:

<body>
<div id="footer"></div>
</body>

与

body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
 

#footer {
position: absolute;
bottom: 0;
}
小开

从IE7开始，你可以简单地使用

#footer {
position:fixed;
bottom:0;
}

请参阅caniuse以获得支持。

小开

我一直在调查这个问题。我见过不少解决方案，每一个都有问题，通常涉及一些神奇的数字。

因此，我从各种来源的最佳实践中得出了这个解决方案:

http://jsfiddle.net/vfSM3/248/

我想在这里实现的事情是让主要内容在绿色区域内的页脚和页眉之间滚动。

这是一个简单的CSS:

html, body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 4em;
background-color: red;
position: relative;
z-index: 1;
}
.content {
background: white;
position: absolute;
top: 5em;
bottom: 5em;
overflow: auto;
}
.contentinner {
}
.container {
height: 100%;
margin: -4em 0 -2em 0;
background: green;
position: relative;
overflow: auto;
}
footer {
height: 2em;
position: relative;
z-index: 1;
background-color: yellow;
}
小开

我的jQuery方法，这一个把页脚放在页面的底部，如果页面内容小于窗口高度，或者只是把页脚放在内容之后，否则:

此外，在其他代码之前将代码保存在自己的附件中，将减少重新定位页脚所需的时间。

(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
小开

一个非常简单的跨浏览器工作的方法是:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;   /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;   /* Height of the footer */
background:#6cf;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>

小开

下面是我的4种不同的方法:

在每个示例中，文本都是可自由编辑的，以说明内容在不同场景中的呈现方式。

1) Flexbox

body{ min-height: 100vh; margin:0; }


header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }


/* The article fills all the space between header & footer */
body{ display:flex; flex-direction:column; }
article{ flex:1; }
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>

2)网格

body{
min-height: 100vh;
margin: 0;
  

display: grid;
grid-template-rows: auto 1fr auto;
}


header{
min-height:50px;
background:lightcyan;
}


footer{
min-height:50px;
background:PapayaWhip;
}
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>

下面的方法使用了一个“诡计”;通过在body上放置::after伪元素，并设置它具有确切的的脚注高度，因此它将占据与脚注完全相同的空间，因此当脚注被absolute定位在它上面时，它将看起来像脚注真的占据了空间，并消除了它的绝对定位的负面影响(例如，越过主体的内容)

3) position:absolute(没有动态页脚高度)

body{ min-height:100vh; margin:0; position:relative; }
header{ min-height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }


/* Trick: */
body {
position: relative;
}


body::after {
content: '';
display: block;
height: 50px; /* Set same as footer's height */
}


footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>

4)表布局

html{ height:100%; }
body { min-height:100%;  margin:0; }


header {
height: 50px;
background: lightcyan;
}


article {
height: 1%;
}


footer {
height: 50px;
background: PapayaWhip;
}


/**** Trick: ****/


body {
display: table;
width: 100%;
}


body > footer {
display: table-row;
}
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>

小开
只需要将html、正文和除页脚之外的其他行设置为100%。 如< / p > 
<body>
<header></header>
<content></content>
<footer></footer>
CSS变成了 
html, body, header, content{
height:100%;
}
小开

然而，另一个非常简单的解决方案是:

html, body {
height: 100%;
width: 100%;
margin: 0;
display: table;
}


footer {
background-color: grey;
display: table-row;
height: 0;
}

jsFiddle

窍门是整个文档使用display:table，页脚使用display:table-row和height:0。

因为页脚是唯一显示为table-row的子主体，所以它呈现在页面底部。

小开

我使用的一个简单的解决方案，从IE8+工作

在html上给min-height:100%，这样如果内容较少，那么页面仍然采用完整的视图高度，页脚贴在页面底部。当内容增加时，页脚随着内容向下移动，并保持贴在底部。

JS小提琴工作演示:http://jsfiddle.net/3L3h64qo/2/

Css

html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}

超文本标记语言

   <html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
小开

与其他解决方案相比，不需要添加额外的容器。因此，这个解决方案更优雅一些。在代码示例下面，我将解释为什么这样工作。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
        

html
{
height:100%;
}
            

body
{
min-height:100%;
padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
margin:0; /*see above comment*/
}
        

body
{
position:relative;
padding-bottom:60px; /* Same height as the footer. */
}
            

footer
{
position:absolute;
bottom:0px;
height: 60px;
                

background-color: red;
}
        

</style>
</head>
<body>
<header>header</header>
        

        

<footer>footer</footer>
</body>
</html>

所以我们要做的第一件事，就是让最大的容器(html) 100%html页面和页面本身一样大。接下来我们设置body height，它可以大于html标签的100%，但它至少应该一样大，因此我们使用min-height 100%。

我们也让物体是相对的。相对意味着您可以相对地从原始位置移动块元素。但我们在这里不用。因为相对还有第二个用途。任何绝对元素要么是根元素(html)的绝对元素，要么是第一个相对父元素/祖父元素的绝对元素。这就是我们想要的，我们想要footer是绝对的，相对于主体，也就是底部。

最后一步是将footer设置为absolute和bottom:0，这将把它移动到第一个相对的父/祖父类(当然是body)的底部。

现在我们还有一个问题要解决，当我们填满整个页面时，内容会放在页脚下面。为什么?嗯，因为页脚不再在“html流”中，因为它是绝对的。那么我们如何解决这个问题呢?我们将在body中添加padding-bottom。这确保主体实际上比它的内容更大。

小开

我用这个把我的脚贴在底部，它对我有用:

超文本标记语言

<body>
<div class="allButFooter">
<!-- Your page's content goes here, including header, nav, aside, everything -->
</div>
<footer>
<!-- Footer content -->
</footer>
</body>

这是您在HTML中必须做的唯一修改，将div添加到"allButFooter"类中。我对所有的页面都这么做了，那些很短的页面，我知道页脚不会粘在底部，也有足够长的页面，我已经知道我必须滚动。我这样做了，所以我可以看到它在页面内容是动态的情况下工作得很好。

CSS

.allButFooter {
min-height: calc(100vh - 40px);
}

"allButFooter"类有一个min-height值，这取决于视口的高度(100vh意味着视口高度的100%)和页脚的高度，我已经知道是40px。

这就是我所做的，而且对我来说非常有效。我并没有在所有浏览器上都试过，只在Firefox、Chrome和Edge上试过，结果和我想要的一样。页脚贴在底部，不需要更改z-index、位置或任何其他属性。文档中每个元素的位置都是默认位置，我没有将其更改为绝对或固定或其他任何位置。

工作与响应式设计

有件事我想澄清一下。当我在使用Twitter-Bootstrap的响应式设计中工作时，这个解决方案，具有相同的40px高的页脚，并没有像我预期的那样工作。我必须修改函数中我要减去的值

.allButFooter {
min-height: calc(100vh - 95px);
}

这可能是因为Twitter-Bootstrap有自己的边距和填充，所以我必须调整这个值。

小开

这就是我解决同样问题的方法

html {
height: 100%;
box-sizing: border-box;
}


*,
*:before,
*:after {
box-sizing: inherit;
}


body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}


.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}


.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
<div class="demo">


<h1>CSS “Always on the bottom” Footer</h1>


<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>


<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>


<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>


<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>


<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

小开

我在我的许多项目中都使用过，从来没有遇到过任何问题:)

供您参考，代码片段

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
background:green;
}
.footer, .push {
height: 50px; /* .push must be the same height as .footer */
}


.footer{
background:gold;
}
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>


<body>
<div class="wrapper">
Content Area
</div>
  

<div class="push">
</div>
  

<div class="footer">
Footer Area
</div>
</body>
</html>

小开

一个非常简单的弹性解决方案，不需要固定的高度或改变元素的位置。

超文本标记语言

<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>

CSS

.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}


main {
flex: 1;
}

浏览器支持

所有主流浏览器，除了IE11及以下版本。

确保使用Autoprefixer作为适当的前缀。

.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}


main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}


/////////////////////////////////////////////


body,
html {
margin: 0;
padding: 0;
}


header,
main,
footer {
margin: 0;
display: block;
}


header,
footer {
min-height: 80px;
}


header {
background-color: #ccc;
}


main {
background-color: #f4f4f4;
}


footer {
background-color: orange;
}
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>

小开

这样做

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

您还可以阅读flex，它被所有现代浏览器所支持

更新:我读过flex并尝试过。这对我很管用。希望你也能这样。以下是我的实现方法。这里main不是ID，而是div

body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}


main {
display: block;
flex: 1 0 auto;
}

在这里你可以阅读更多关于flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/的信息

请记住，旧版本的IE不支持它。

小开

动态一行使用jQuery

我遇到的所有CSS方法都太死板了。此外，如果页脚不是设计的一部分，那么将它设置为fixed也是不可取的。

测试:

  • 铬:60
  • FF: 54
  • 即:11

假设如下布局:

<html>


<body>
<div id="content"></div>
<div id="footer"></div>
</body>


</html>

使用下面的jQuery函数:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

它所做的是将min-height的#content设置为窗口的高度 - 页脚的高度，无论当时可能是什么。

由于我们使用了min-height，如果#content的高度超过了窗口的高度，该函数将优雅地降级，并且不会产生任何影响，因为不需要它。

看看它的实际应用:

$("#fix").click(function() {
$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html {
background: #111;
}


body {
text-align: center;
background: #444
}


#content {
background: #999;
}


#footer {
background: #777;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<html>


<body>
<div id="content">
<p>Very short content</p>
<button id="fix">Fix it!</button>
</div>
<div id="footer">Mr. Footer</div>
</body>


</html>

在JsFiddle上的相同片段

奖金:

我们可以更进一步，让这个函数适应动态的查看器高度调整，如下所示:

$(window).resize(function() {
$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
}).resize();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html {
background: #111;
}


body {
text-align: center;
background: #444
}


#content {
background: #999;
}


#footer {
background: #777;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<html>


<body>
<div id="content">
<p>Very short content</p>
</div>
<div id="footer">Mr. Footer</div>
</body>


</html>

小开

你可以这样做

.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
小开

只需要自定义页脚部分

.footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 1rem;
text-align: center;
}

 <div class="footer">
Footer is always bootom
</div>
小开 
footer {
margin-top:calc(5% + 60px);
}

这很好

小开

我刚才在这里回答了类似的问题

将页脚定位在具有固定标题的页面底部

我在网页开发方面是新手，我知道这个问题已经有了答案，但这是我发现的最简单的解决方法，我认为在某种程度上是不同的。我想要一些灵活的东西，因为我的网页应用程序的页脚有一个动态高度，我最终使用了FlexBox和一个间隔。

  1. 首先设置html和body的高度
html, body {
height: 100%;
display: flex;
flex-direction: column;
margin: 0px;
}

我假设我们的应用程序的行为是column，在这种情况下，你需要添加一个标题，英雄或任何垂直对齐的内容。

  1. 创建spacer类
.spacer {
flex: 1;
}
  1. 之后你的HTML可能是这样的
<html>
<body>
<header> Header </header>
Some content...
<div class='spacer'></div>
<footer> Footer </footer>
</body>
</html>
你可以在这里玩 # EYZ0 < / p >
小开 
<!DOCTYPE html>


<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>


<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>


</html>




#page-container {
position: relative;
min-height: 100vh;
}


#content-wrap {
padding-bottom: 2.5rem;    /* Footer height */
}


#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem;            /* Footer height */
}
小开

我做了什么

超文本标记语言

    <div>
<div class="register">
/* your content*/
</div>
<div class="footer" />
<div/>

CSS

.register {
min-height : calc(100vh - 10rem);
}


.footer {
height: 10rem;
}

不需要使用位置固定和绝对。只需以适当的方式编写html即可。

小开

使用Bootstrap的一行解决方案

除了所有提供的CSS和jQuery解决方案，
我已经列出了一个使用引导的解决方案，在<身体强壮> < / >强标签上有一个类声明:d-flex flex-column justify-content-between

  • 这个不要求页脚的知道高度提前。
  • 这个不需要设置< >强劲地位绝对< / >强。
  • 这个作品与< >强溢出< / >强在小屏幕上的动态divs。

html, body {
height: 100%;
}
<html>


<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>


<body class="d-flex flex-column justify-content-between text-white text-center">


<header class="p-5 bg-dark">
<h1>Header</h1>
</header>
<main class="p-5 bg-primary">
<h1>Main</h1>
</main>
<footer class="p-5 bg-warning">
<h1>Footer</h1>
</footer>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>


</html>

小开

其实很简单。这个解决方案不需要知道页脚高度。

<body>
<div class="app">
Website
</div>
<div class="footer">
Footer
</div>
</body>

.app {
min-height: 100vh;
}
小开

有些解决方案不适合我，但当我决定使用flex选项时，我发现最好的选择是下面的示例。

html, body{
height: 100%;
}


body{
display: flex;
flex-direction: column;
}


.main-contents{
flex: 1 0 auto;
min-height: 100%;
margin-bottom: -77px;
background-color: #CCC;
}


.footer{
height:  77px;
min-height: 77px;
width: 100%;
bottom: 0;
left: 0;
background: #000000;
flex-shrink: 0;
flex-direction: row;
position: relative;
    

    

}


.footer-text{
color: #FFF;
}


@media screen and (max-width: 767px){
#content{
padding-bottom: 0;
}
.footer{
position: relative;
/*position: absolute;*/
height: 77px;
width: 100%;
bottom: 0;
left: 0;
}


}
<html>
<body>
<div class="main-contents" >
this is the main content
</div>
</body>


<footer class="footer">
<p class="footer-text">This is the sticky footer</p>
</footer>


</html>

小开

我认为你可以将主要内容设置为视口高度，所以如果内容超过，主要内容的高度将定义页脚的位置

* {
margin: 0;
padding: 0;
width: 100%;
}


body {
display: flex;
flex-direction: column;
}


header {
height: 50px;
background: red;
}


main {
background: blue;
/* This is the most important part*/
height: 100vh;
  

}
footer{
background: black;
height: 50px;
bottom: 0;
}
<header></header>
<main></main>
<footer></footer>

小开

我实现了使用CSS网格，基本上我定义了3行:

  • 头
  • 内容
  • 页脚

并且使用网格来定义大小，诀窍是在行末对齐页脚，像这样:

CSS

body {
display: grid;
grid-template-rows: auto auto auto;
}


footer {
display: grid;
align-self: end; /* The trick */
}

HTML文件

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>


<body>
<header>
Header content
</header>
  

<h1>main body</h1>
<p>This is a paragraph.</p>
  

<footer>
<p>Hello there.</p>
</footer>
</body>
</html>

您可以使用更多的行，但请记住将其添加到CSS中，或将所有内容包装在div中。

这个指南在这里真的帮助我解决了这个问题。

小开

对我有用。

#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}


#footer{
margin-top:auto;
}




<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>


#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}


#footer{
margin-top:auto;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>

小开

使用Flexbox保持页脚在底部

<div style="min-height:100vh; display:flex; flex-direction:column;
justify-content:space-between;">
 

<div> <!-- Wrapper (Without footer) -->
   

<header>
I am a header.
</header>
  

<article>
I am an article!
</article>
   

</div> <!-- End: Wrapper (Without footer) -->
 

 

<footer>
I am a footer.
</footer>
 

</div>

请注意

  • 确保你把所有东西都包装在<div>或任何其他块级元素中，使用以下CSS样式:min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; 。

  • 确保你在<div>或任何其他块级元素中包装了除页脚元素以外的所有内容。

  • 请确保您使用<footer>或任何其他块级元素来包装页脚。

代码的解释

  • min-height: 100vh确保body元素至少延伸到屏幕的全部高度

  • flex-direction: column在保留堆叠块元素方面保持正常文档流的行为(假设主体的直接子元素确实都是块元素)。

  • justify-content:space-between将页脚推到屏幕底部。

检查如何做同样的(保持页脚在底部)使用引导5 - 链接

小开

位置fixed与bottom， left和right设置为0最适合我:

.footer {
position: fixed;
background : #d1ccc0;
bottom : 0;
left : 0;
right : 0;
height : 50px;
}

位置absolute不粘在底部，但是fixed粘在底部。

小开

对于固定的高度页脚，你也可以使用css变量来做。

/* Globals */


* {
padding: 0;
margin: 0;
box-sizing: border-box;
}


body {
font-family: Arial;
}


main {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - var(--navbar-height) - var(--footer-height));
background-color: #1b1b1b;
color: cyan;
}




/* Navbar */


:root {
--navbar-height: 60px;
}


.navbar {
display: flex;
justify-content: center;
align-items: center;
height: var(--navbar-height);
color: white;
background-image: linear-gradient(75deg, yellow, orange);
}




/* Footer */


:root {
--footer-height: 40px;
}


footer {
display: flex;
justify-content: center;
align-items: center;
height: var(--footer-height);
color: white;
font-weight: 700;
background-image: linear-gradient(70deg, yellow 0%, orange 25%, teal 25%, cyan 50%, red 50%, magenta 75%, black 75%, grey 100%);
/* background-image: linear-gradient(70deg, black 0%, cyan 100%); */
}
<body>
<nav class="navbar">Navbar</nav>
<main>Main Section</main>
<footer>&copy; Test 2021 - FOREVER ❤🌌♾</footer>
</body>

小开 
<!DOCTYPE html>


<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>


<body>
<header class='header'></header>
<div class="body-content">
<!-- all other page content -->
</div>
<footer class="footer"></footer>
</body>


</html>


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


.body-content {
flex-grow:1
}
小开

你需要使用position: absolute;，这很重要，然后是bottom:0

.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
小开

虽然我找到了许多类似的答案，但我能找到的唯一解决方案是，页脚总是在底部而且没有显示在现有数据之上:

footer {
position: relative;
clear: both;
}
小开 
<body>
<section class="wrapper">
<!--Some Content-->
</div>


<section class="footer"></section>
</body>


.wrapper {
min-height: 100vh;
}


.footer {
top: 100vh;
}

提交答案