如何让两步引导页的页脚显示在页面底部且非粘性？

要实现页脚固定在页面底部（内容不足时在视口底部，内容过长时在内容末尾）且滚动时不固定（非粘性），最可靠的方式是利用Flex布局来控制页面结构，具体调整如下：

1. 调整引导页的整体布局结构 #

给onboarding.vue的最外层容器添加Flex布局属性，让页面整体占满视口高度，并自动分配内容区和页脚的空间：

<template>
  <!-- 最外层容器：占满视口高度，垂直排列子元素 -->
  <div class="d-flex flex-column min-vh-100">
    <div class="d-flex mb-3 justify-content-between">
      <!-- header -->
    </div>

    <!-- 中间内容区：自动填充剩余空间，把页脚推到底部 -->
    <div class="d-flex flex-column flex-fill">
      <div class="px-2 flex-fill" v-if="currentStep == 1">
        <!-- Step 1: Language Selection -->
      </div>

      <div class="px-2 flex-fill" v-if="currentStep == 2">
        <!-- Step 2: Agent Selection -->
      </div>
    </div>

    <div class="d-flex mb-3 justify-content-end">
      <MainFooter />
    </div>
  </div>
</template>

这里直接用了Bootstrap的内置类：

• d-flex flex-column：设置垂直方向的Flex布局
• min-vh-100：确保容器至少占满整个视口高度
• flex-fill：让内容区自动填充header和footer之外的剩余空间

2. 修改页脚样式 #

移除MainFooter.vue中.footer类的margin-top: 100px属性，避免额外的间距导致位置偏移：

.footer {
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  align-items: center;
  text-align: center;
  text-transform: capitalize;
  color: var(--black);
  /* 移除这个会导致位置偏移的margin */
  /* margin-top: 100px; */
  position: relative;
  background-color: var(--white);
}

效果说明 #

• 当第一步内容较少时，flex-fill的内容区会被自动拉长，把页脚精准推到视口底部；
• 当第二步内容较多时，内容区会自然延伸，页脚会跟在内容末尾，滚动时会随页面一起移动，完全符合「非粘性」需求；
• 相比position: absolute的方案，Flex布局不会破坏页面的正常文档流，避免出现页脚覆盖内容或者位置异常的问题。

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