如何让页脚显示在移动端视图的首屏底部？

你的问题出在body的justify-content: center属性上——这个设置会让页面内容整体垂直居中，导致当内容总高度超过视口高度时，页脚被挤出首屏；当内容不足时，页脚也会停留在屏幕中间而非底部。

修改方案： #

1. 调整body的布局属性
   移除justify-content: center，保留水平居中设置，同时清除浏览器默认边距避免不必要的滚动：

body {
    color: var(--font-color-primary);
    font-family: 'VAG Rounded Next', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center; /* 保持内容水平居中 */
    flex-direction: column;
    margin: 0; /* 清除默认边距 */
}

2. 保留主内容与页脚的核心设置
   主内容的flex: 1会自动占据视口内除页脚外的所有剩余空间，页脚会自然固定在视口底部，无需额外修改原有样式：

.jfc {
    border-left: 0.1px solid #929292;
    border-right: 0.1px solid #929292;
    max-width: 430px;
    padding: 32px 38px;
    flex: 1;
    width: 100%;
    position: relative;
}

footer {
    border-top: 0.1px solid #929292;
    border-left: 0.1px solid #929292;
    border-right: 0.1px solid #929292;
    max-width: 430px;
    line-height: 13.78px !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
}

修改后，无论主内容高度如何，页脚都会固定在视口底部，移动端首屏内即可直接看到，无需滚动。

内容的提问来源于stack exchange，提问作者rochellecanale