Html 页脚不'；不要沉沦

我的页面分为三部分。

页眉

主和

页脚

标题

固定在顶部，并且

109px

具有

6px

边框高度，因此

main

的顶部有

109px

边距

我希望

main

扩展到页眉下方的整个页面和页脚，如果没有可用的内容将其向下推，则页脚应位于屏幕底部

footer

是

86px

高的，因为顶部的边框是

80px

和

6px

。

footer

进入底部，

main

扩展，但如果页面比页面长，则不会向下推

footer

如果

main

的内容增加，我该如何将

页脚保持在底部


html{
身高：100%；
框大小：边框框；
}
身体{
背景色：#F5；
保证金：0；
填充：0；
位置：相对位置；
身高：100%；
}
/* ---------------------------------------------------------------- */
主要{
填充顶部：120px；
/*特征值109px*/
填充底部：150px；
/*特征值86px*/
文本对齐：居中；
}
#全部{
身高：100%；
}
#标题{
背景色：#25211e；
边框底部：6px实心#1d1a18；
文本对齐：居中；
位置：固定；
左：0；
排名：0；
宽度：100%；
高度：103px；
盒影：0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23）；
z指数：99；
}
#标题{
字体系列：“标题字体”；
颜色：#c1b497；
字体大小：45px；
显示：内联块；
边缘底部：10px；
边缘顶部：15px；
}
#页脚{
背景色：#25211e；
边框顶部：6px实心#1d1a18；
文本对齐：居中；
位置：绝对位置；
右：0；
底部：0；
左：0；
高度：80px；
z指数：98；
盒影：0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23）；
}
#功劳{
字体系列：“Helvetica”；
字体大小：14px；
颜色：#c1b497；
字号：600；
}

我的页面
我的页面
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
页脚

您需要将
高度：100%
添加到
#main

main {
  padding-top: 120px;
  padding-bottom: 150px;
  text-align: center;
  height: 100%;
}

你可以试试flexbox粘性页脚


正文{
保证金：0；
}
.包装纸{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
}
页眉、页脚{
高度：40px；
背景颜色：浅灰色；
}
主要{
弹性：10自动；
}

标题
主要内容
页脚
您可以更改

 position: fixed;

在您的
#页脚中
CSS


html{
身高：100%；
框大小：边框框；
}
身体{
背景色：#F5；
保证金：0；
填充：0；
位置：相对位置；
身高：100%；
}
/* ---------------------------------------------------------------- */
#全部{
身高：100%；
}
#标题{
背景色：#25211e；
边框底部：6px实心#1d1a18；
文本对齐：居中；
位置：固定；
左：0；
排名：0；
宽度：100%；
高度：103px；
盒影：0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23）；
z指数：99；
}
#标题{
字体系列：“标题字体”；
颜色：#c1b497；
字体大小：45px；
显示：内联块；
边缘底部：10px；
边缘顶部：15px；
}
主要{
填充顶部：120px；
/*特征值109px*/
填充底部：150px；
/*特征值86px*/
文本对齐：居中；
}
#页脚{
背景色：#25211e；
边框顶部：6px实心#1d1a18；
文本对齐：居中；
位置：固定；
右：0；
底部：0；
左：0；
高度：80px；
z指数：98；
盒影：0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23）；
}
#功劳{
字体系列：“Helvetica”；
字体大小：14px；
颜色：#c1b497；
字号：600；
}

我的页面
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
页脚

使
主体
标签具有
最小高度：100%
并移除
高度
。您需要更改的内容：

正文{
/*高度：100%；*/删除
最小高度：100%；
}

以下是代码片段中的所有代码：


html{
身高：100%；
框大小：边框框；
}
身体{
背景色：#F5；
保证金：0；
填充：0；
位置：相对位置；
最小高度：100%；
}
/* ---------------------------------------------------------------- */
主要{
填充顶部：120px；
/*特征值109px*/
填充底部：150px；
/*特征值86px*/
文本对齐：居中；
}
#全部{
身高：100%；
}
#标题{
背景色：#25211e；
边框底部：6px实心#1d1a18；
文本对齐：居中；
位置：固定；
左：0；
排名：0；
宽度：100%；
高度：103px；
盒影：0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23）；
z指数：99；
}
#标题{
字体系列：“标题字体”；
颜色：#c1b497；
字体大小：45px；
显示：内联块；
边缘底部：10px；
边缘顶部：15px；
}
#页脚{
背景色：#25211e；
边框顶部：6px实心#1d1a18；
文本对齐：居中；
位置：绝对位置；
右：0；
底部：0；
左：0；
高度：80px；
z指数：98；
盒影：0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23）；
}

我的页面
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}