Html 为什么我的页脚不在页面底部？

我正在开发我的第一个网站，似乎我遇到了一个问题。我已经创建了一个页脚，但它不会停留在底部。页脚会弄乱页面中的所有其他内容，并扭曲我的项目。我应该添加什么才能使我的页脚粘到底部，从而对页面的其余部分造成任何麻烦？。这是我的密码

*{
保证金：自动；
填充：自动；
框大小：边框框；
字体系列：世纪哥特式；
}
标题{
身高：15%；
背景尺寸：封面；
背景位置：中心；
背景色：#ebebebeb；
边框底部：5px实心#A9A9；
位置：相对位置；
}
html，
身体{
字体大小：.80em；
利润率：0%；
填充：0%；
颜色：#6969；
身高：100%；
宽度：100%；
}
.页脚{
背景：#bfbf；
颜色：#D3；
高度：300px；
位置：相对位置；
}
页脚内容{
边框：1px纯红；
高度：400px；
}
.footer.footer底部{
背景：343a40；
颜色：#6868；
高度：50px；
宽度：100%；
文本对齐：居中；
位置：绝对位置；
底部：0px；
左：0px；
填充顶部：20px；
}
.页脚部分社交h1{
左缘：6%；
利润上限：-1%；
字号：50；
字体大小：150%；
颜色：黑色；
}
.徽标页脚h1{
填充：1.5%；
左缘：3%；
字体系列：Leckerli One；
颜色：黑色；
字体大小：3.1875rem；
}
.footer关于{
左缘：2%；
右边距：0%；
}

&复制；#。com |由#

您的页脚没有粘在页面底部，因为灰色div的高度没有覆盖整个网页的高度。要解决此问题，您可以执行以下操作：

 <div class='container'>
    
     <div class='footer'>
  </div>

---

你必须用固定的位置使它粘到底部

.footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;

}

---

有几种方法可以做到这一点，我在代码段中添加了默认的html结构：

绝对页脚和相对位置，100vh最小高度主体：

body，html{
保证金：0；
填充：0；
}
* {
框大小：边框框；
}
身体{
位置：相对位置；
最小高度：100vh；
填充底部：50px；
}
正文.页脚{
位置：绝对位置；
底部：0px；
左：0px；
宽度：100%；
高度：50px；
背景色：黑色；
}

---

您通常应该有一个导航栏、一个页面正文和一个页脚。 页面正文应该占据导航和页脚之间的所有空间

最简单的方法是使用Flex。请尝试以下操作：

正文{
最小高度：100vh；
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：立柱；
保证金：0；
填充：0；
}
.导航{
高度：60px；
宽度：100%；
背景：蓝色；
}
.内容{
身高：100%；
宽度：100%；
显示器：flex；
柔性生长：1；
}
.页脚{
高度：100px；
宽度：100%；
背景：红色；
}

测试内容

是否希望页脚始终可见？或者你想要卷轴，但只是把页脚放在其他东西的下面？不幸的是，没有。它们都不适合我。

.footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;

}