尝试margin-bottom:auto无效，如何让footer始终居底并留间距？

你之前尝试给区块加margin-bottom: auto没效果，核心原因是作为父容器的body（即#login-section）没有启用Flex布局，margin:auto只有在Flex容器内才能实现自动分配剩余空间的作用。下面给出两种符合需求的解决方案：

方案一：Flex布局实现"粘底footer"（内容少时在底部，内容多时随页面滚动） #

这种方案适合footer在页面内容不足时固定在视口底部，内容超过视口时随页面滚动到最下方的场景，同时能轻松设置与上方区块的间距：

修改后的完整代码 #

CSS

#login-section {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0; /* 清除body默认边距，避免不必要的滚动条 */
}

#company-section{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem; /* 自定义与footer的间距，可按需调整数值 */
  /* 若想让内容区自动占满剩余空间，添加此行：flex: 1; */
}

.company-alignment {
  width: 100%;
  max-width: 1240px;
}

#footer-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 可选：给footer加背景色区分 */
  /* background-color: #f5f5f5; */
}

HTML

<body id="login-section">
    <section id="company-section">
        <div class="company-alignment">
            <p>Imprint</p>
        </div>
    </section>

    <section id="footer-section">
        Hi
    </section>
</body>

方案二：固定定位实现"始终固定在视口底部" #

如果需要footer完全固定在浏览器视口底部，不随页面滚动移动，可使用固定定位方案：

修改后的完整代码 #

CSS

#login-section {
  margin: 0;
  padding-bottom: 60px; /* 值为「footer高度 + 间距」，防止页面底部内容被footer遮挡 */
}

#company-section{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.company-alignment {
  width: 100%;
  max-width: 1240px;
}

#footer-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 40px; /* 自定义footer高度 */
  /* 可选：添加背景色区分 */
  /* background-color: #f5f5f5; */
}

HTML

<body id="login-section">
    <section id="company-section">
        <div class="company-alignment">
            <p>Imprint</p>
        </div>
    </section>

    <section id="footer-section">
        Hi
    </section>
</body>

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