如何使用position: relative将页脚（footer）移动到页面底部？

实现方案 #

你需要在原有CSS基础上新增/修改以下样式，即可通过position: relative实现页脚固定在页面底部：

步骤1：新增根元素基础样式 #

保证页面容器撑满整个视口高度，避免内容不足时页脚飘在页面中间：

html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  /* 若你的页面主内容包裹在自定义容器（比如.page-wrapper）中，给该容器添加以下属性 */
  .page-wrapper {
    min-height: 100vh;
    padding-bottom: 60px; /* 数值和页脚高度保持一致，避免内容被页脚遮挡 */
    box-sizing: border-box;
  }
}

步骤2：修改.s-footer样式 #

在原有.s-footer配置中新增position: relative相关属性：

.s-footer {
    background-color: $primary;
    margin-top: auto!important;
    padding: 0px !important;
    border-top: 1px solid $primary;
    font-size: 0.875rem;
    color: $default;
    /* 新增以下内容 */
    position: relative;
    bottom: 0;
    width: 100%;
    /* 可根据实际需求设置页脚高度，这里示例为60px */
    height: 60px;
    line-height: 60px;
    .tool_dataprivacy {
        display: none;
    }
    .helplink {
        display: none;
    }
}

注意事项 #

• position: relative是基于元素自身原本的文档流位置偏移，不会脱离文档流，也不会影响其他元素的布局
• 如果调整后页脚和上方内容间距不符合预期，可以修改bottom属性值调整偏移量，正数为向上偏移，负数为向下偏移

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