如何让Footer固定在30%宽度Section的底部？

这个需求完全可行，问题出在position属性的使用逻辑和容器滚动的处理上，下面分场景给出具体实现方案：

场景1：Section内容无需滚动（高度不超过视口） #

• 给父容器Section设置：position: relative; width: 30%; height: 100vh;（高度可根据需求调整，但必须给父容器明确高度，否则absolute定位的Footer找不到参照）
• Footer设置：position: absolute; bottom: 0; left: 0; width: 100%;
• 注意：表单区域要留足够的margin-bottom，避免内容被Footer遮挡。

场景2：Section内容需要内部滚动（高度超过视口） #

你之前用relative+absolute出现滚动按钮上移的问题，是因为Section没设置内部滚动，导致页面整体滚动而非Section内部滚动。用sticky定位能完美解决这个问题：

• 父容器Section设置：position: relative; width: 30%; height: 100vh; overflow-y: auto;（overflow-y: auto让Section内部出现滚动条）
• 表单外层套一个容器，设置：padding-bottom: [Footer的高度值];（比如Footer高60px就设padding-bottom: 60px，防止滚动到底部时表单内容被Footer挡住）
• Footer设置：position: sticky; bottom: 0; width: 100%;（sticky会让Footer固定在Section底部，随Section滚动但始终停留在底部区域）

完整代码示例 #

<section class="section-container">
  <div class="form-content">
    <!-- 这里放你的表单元素 -->
    <input type="text" placeholder="输入内容">
    <div style="height: 1200px;">模拟长表单内容</div>
  </div>
  <footer class="section-footer">
    Section底部Footer
  </footer>
</section>

.section-container {
  position: relative;
  width: 30%;
  height: 100vh;
  overflow-y: auto;
  border: 1px solid #eee;
  margin: 0 auto;
}

.form-content {
  padding-bottom: 60px; /* 和Footer高度一致 */
  padding: 15px;
}

.section-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #f8f8f8;
  line-height: 60px;
  text-align: center;
  border-top: 1px solid #eee;
}

为什么position: fixed不生效？ #

fixed是相对于浏览器视口定位的，完全脱离父容器的约束，所以它的宽度默认是视口的100%，无法继承Section的30%宽度，自然不符合你的需求。

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