为什么我的页脚被卡在网页的中间？

Question

我已经尝试了各种方法，但是我的页脚仍然停留在中间位置，甚至我已经将body的高度设置为100%或100vh。
页脚在中间位置（参见此链接：）

CSS代码如下：

body {
    display: flex;
    flex-direction: column;
    font-family: "Poppins", sans-serif;
    font-family: "Righteous", sans-serif;
    font-family: "Roboto", sans-serif;
}
.navbar-nav li a:hover {
    color: #536976 !important;
}
.d-flex {
    width: 100%;
}
.footer {
    width: 100%;
    text-align: center;
    height: 30px;
    margin-top: auto;
    position: absolute;
    bottom: 0px;
}
.footer p {
    margin-top: 25px;
    font-size: 12px;
    color: #fff;
}
.padding {
    padding-top: 20px;
}

.form-hide {
    margin: 0px;
    padding: 0px;
}
.delete-btn {
    margin: 0px;
    padding: 0px;
}
.panel-body {
    padding: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.inline {
    display: inline;
}

.compose {
    margin-top: 50px;
    height: calc(100vh - 80px);
}
.post {
    margin-top: 50px;
}
.content {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.journee {
    background: #536976;
    background: -webkit-linear-gradient(to right, #484e76, #536976);
    background: linear-gradient(to left, #484e76, #536976);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

页脚HTML代码：


    
    
        © 2020 Copyright: 
        MDBootstrap.com

我尝试使用position: fixed使其固定在底部，但是页脚依然卡在帖子下面不动。我不明白到底发生了什么，我正在使用Bootstrap 5框架。

Thom A · Answer

body {
  display: flex; /* 设置为弹性布局 */
  flex-direction: column; /* 垂直方向排列子元素 */
  min-height: 100vh; /* 设置最小高度为视口高度的100% */
  font-family: "Poppins", sans-serif;
  font-family: "Righteous", sans-serif;
  font-family: "Roboto", sans-serif; /* 字体设置，实际应保留一种字体即可 */
}

.footer {
  width: 100%; /* 宽度占满整个容器 */
  text-align: center; /* 文本居中对齐 */
  height: 30px; /* 设置固定高度 */
  margin-top: auto; /* 利用自动外边距使元素位于底部 */
  bottom: 0; /* 靠近底部定位 */
}

.footer p {
  margin-top: 5px; /* 根据需要调整顶部外边距 */
  font-size: 12px; /* 设置字体大小 */
  color: #fff; /* 设置字体颜色为白色 */
}

这段代码中，body 元素的高度至少会占据视口高度的100%，通过在 .footer 类上设置 margin-top: auto，可以让其自动推至弹性容器的底部。

Gerardo Furtado · Answer

请确保正确使用Flexbox布局方式。

body {
    display: flex; /* 使用Flexbox布局 */
    flex-direction: column; /* 子元素垂直方向排列 */
    font-family: "Poppins", sans-serif;
    font-family: "Righteous", sans-serif;
    font-family: "Roboto", sans-serif; /* 字体设置，实际应用中只需保留一种 */
    min-height: 100vh; /* 使用min-height属性以适应整个视口高度 */
}

.content {
    flex: 1; /* 占据剩余所有空间 */
}

额外的CSS样式：

.footer {
    width: 100%; /* 宽度铺满整个容器 */
    height: 30px; /* 设置固定高度 */
    margin-top: auto; /* 利用auto值使元素自动移至容器底部 */
}

Ryan Lundy · Answer

答案基于以下问题：链接。

这种方法能够保持

和

的动态性。

这段代码将会把页脚置于页面底部。即使内容不足以填满整个页面时，页脚也会位于屏幕底部。







  Header
  内容
  Footer