如何让footer始终固定在页面底部？求无需wrapper的合规方案

方案一：无需额外Wrapper的纯CSS方案 #

直接利用<body>作为Flex容器，无需新增嵌套元素：

1. 基础样式设置：

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

2. Fixed Header与主体内容适配：

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; /* 替换为你的header实际高度 */
  background: #fff;
  z-index: 999;
}

main {
  padding-top: 80px; /* 与header高度一致，避免内容被遮挡 */
  flex: 1; /* 自动填充页面剩余空间 */
}

3. Footer样式：

footer {
  height: 60px; /* 替换为你的footer实际高度 */
  background: red;
}

此方案中，flex:1会让<main>撑满header和footer之外的空间，即使main无内容，footer也会固定在视口底部，且不会被fixed的header遮挡。

方案二：基于Wrapper的Flexbox方案 #

若需要统一包裹主体与footer，可使用顶级容器：

1. 页面结构：

<header>Header Content</header>
<div class="page-wrapper">
  <main>Main Content</main>
  <footer>Footer Content</footer>
</div>

2. CSS样式：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #fff;
  z-index: 999;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 80px; /* 避开fixed header的区域 */
}

main {
  flex: 1; /* 填充容器剩余空间 */
}

footer {
  height: 60px;
  background: red;
}

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